Topic: CSS positioning in IE & FF (Page 1 of 1)

this works pretty good for me in IE 6, but in FF 1.0.3 it brings the content down and spans 100%. I am thinking this might have some thing to do with the 100% table width, but I had assumed it would be 100% of the containing content div. any thoughts?

see www.ixifx.net for an example

body {

	font-family: Arial, 'Sans Serif';

	font-size: 1em;

	line-height: 1.5em;

	color: #0A80BA;

	background: #000000;

}



#frame {

	width: 640px;

	margin: auto;

	text-align: left;

	border: 2px solid;

}



#banner {

	margin: auto;

	text-align: center;

}



#navigation {

	width: auto;

	border: 2px solid;

	margin-left: 10px;

	margin-right: 10px;

	padding: 5px;

	font-weight: bold;

	overflow: none;

	float: left;

	background: #000022;

}



#content {

	width: auto;

	float: left;

	margin-left: 10px;

	margin-right: 10px;

}



#clear {

	height: 30px;

	width: 640px;

	margin-top: 10px;

	padding-top: 10px;

	clear: both;

	text-align: center;

	border-top: 3px solid;

}

I know the pieces fit, 'cause I watched them fall away (Maynard J. Keenan)

Ummm... the currently uploaded bage doesn't actualy link to a stylesheet. The link tag reads:

<link rel="stylesheet" type="text/css" href=".css">

Justice 4 Pat Richard

That's because you're visiting it for the first time and I X I still hasn't designated a default stylesheet to display when the cookie he's checking is not set (which would be the case for first-time visitors). He'll get around to it eventually, we hope.



Anyway, the various CSS files are named "blue.css", "green.css", "red.css", etc., but the positioning info should all be the same.

In other news, I haven't had the time to sit down and try to figure out this problem (forum participation lately has been limited to the occasional pithy comment here and there, not unlike this one). One thing I usually do when a bug crops up is start taking stuff out--that is, work backwards--until it works again. Then I start adding stuff in again until it breaks. Then I fix it.

I can't stress this enough, though: do not design in one browser and then go and check it in the other browsers after you're finished (or well into the project). Every major change should be checked to make sure it doesn't break in any of the (major) browsers.

___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

well, I tried putting this little bit of PHP at the top of my index page

if (!isset($_COOKIE["userstyle"])) {

	setcookie("userstyle", "blue", time()+60*60*24*30);

}

I was hoping that would work, but apparently I'm mistaken

this is my first attempt at using cookies and multiple stylesheets, and I'm still a novice with php.



You know I'd like to keep my cheeks dry today, so stay with me and I'll have it made (Shannon Hoon)


(Edited by I X I on 05-03-2005 22:25)

this is causing your problem:

#content {

width: auto;

}

It needs to have some sort of value set to it and the width of the nav bar so that they'l sit nicely next to each other in your absolutely sized #frame div


Justice 4 Pat Richard

wrong forum but...


Cookies aren't readable until you revist the page, try this:

if (!isset($_COOKIE["userstyle"])) {



	setcookie("userstyle", "blue", time()+60*60*24*30);

        $_COOKIE['userstyle'] = 'blue';



}

.:[ Never resist a perfect moment ]:.

wrong forum, I know, but I didn't want to start yet another thread on basically the same topic.

I think I've got the default style problem fixed, but I'm still working on FF. I tried setting the max-width property to 20% and 75% for the nav and content divs, but that's not working, so I suppose I'll keep playing with it.

thanks again for all the help.



Take your time, hurry up; the choice is yours just don't be late (Kurt Cobain)