CSS - Firefox And Explorer

Hi,

I'm noticing a different behaviour between firefox and explorer regarding de margin attribute, and I can't explain it applying the well known box model difference.

Here is the css code:

Code:

div#main {
	margin: 10px auto 20px auto;
	width: 1001px;
	border: 1px solid #000000;
	}

div#left {
	float: left;
	width: 150px;
	}

div#content {
	width: 600px;
	margin-left: 160px;
	background-color:#0033CC;
	}

Here is the HTML:

Code:

<div id="main">
	<div id="left">left</div>
	<div id="content">content</div>
</div>

What I get in firefox is the expected, the content div is exactly at 160px distance of the inner part of the main div border.

However in explorer the distance is 163px?? According to the box model difference, if we consider that in explorer the width includes the border, the distance should be 161px but not 163px.

Any ideas?

Caste

Hey guys, I'm in need of some help here.

Okay, so. My site looks the way I want so far on google chrome and safari (mac). And right now I'm at the stage of getting it to display like the two.

If anyone who decides to help doesn't have access to certain browsers, I'll further explain, but I think it's easiest said to see for yourself.

Right now I'm focusing on ie6, ie7, ff3. The markup in some areas is whacky, I know, but I decided to pick up where I left off on this project (which I first began building awhile ago) instead of starting completely over with a good template.

http://thecheckoutplace.com/compute...eOneNetbook.php

If anyone can offer a hand, it means a lot. Cheers guys.

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 } 

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div> 

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.

I am learning css and as many people do, have used code given gratefully by someone else,

Code:

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;

	}
	
ul li {
	position: relative;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	color: #000;
	margin-bottom: 0px;	
	}
	
li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	float: left;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	color: #6290B2
	margin-bottom: 0px;
	}
	
ul li a {
	display: block;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	color: #6290B2;
	background: #FFF;
	padding: 5px;
	border: 1px solid #ccc;
	margin-bottom: 0px;
	}
	
li:hover ul, li.over ul { 
	display: block;
	}

www.indigochilli.co.uk/eheating

now im sure it works fine(with no spaces between the boxes) for all using firefox or something similar, however I need it to work for exmplorer, which it doesnt, because it is a drop down(well sideways) menu, (which btw you cant see because your not logged in) the spaces mess up the functionability of it. Now I have messed around with heights, margins alsorts but explorer isnt cooprtating, is this a problem explorer often has?

Hey guys. I found some CSS code that will causes the latest IE 6 browsers to display an error reporting window if the service is running and close IE. It works on two computers. A celeron 1.2GHz and an Athlon 2600+.

Here is the original code that IE works fine with.
Code:

/*nav.css*/
#nav *{font: small-caps normal 98%/1em sans-serif;display:block;}
#nav * a{color:#9fb594;display:block;}
#nav_list,#nav,#nav_main{float:left;clear:none;}
#nav_main{background-image:url('../image/nav_bg.png');background-repeat:repeat-y;width:122px;}
#nav_foot{background-image:url('../image/nav_foot.png');background-repeat:no-repeat;height:177px;width:122px;}
#nav_foot{font: small-caps normal .6em/1em sans-serif;}
#nav_foot a{width:105px;margin-top:2px;vertical-align:bottom;}
#nav * ul{list-style-type:none;padding:0;margin:0;}
#sub_nav_list{background-color:#000;text-align:right;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a{width:105px;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a,#sub_nav_list,#nav_foot{float:left;clear:both;}
.nav_item{height:2.2em;}
.sub_nav_item a{padding-bottom:.5em;min-height:1em;}
.selected a.nav_hlink{font:normal small-caps 900 98%/1em sans-serif;}
#nav_main * a:hover{background-color:#333;}

The last item, the hover, is what is changed.
Code:

/*nav.css*/
#nav *{font: small-caps normal 98%/1em sans-serif;display:block;}
#nav * a{color:#9fb594;display:block;}
#nav_list,#nav,#nav_main{float:left;clear:none;}
#nav_main{background-image:url('../image/nav_bg.png');background-repeat:repeat-y;width:122px;}
#nav_foot{background-image:url('../image/nav_foot.png');background-repeat:no-repeat;height:177px;width:122px;}
#nav_foot{font: small-caps normal .6em/1em sans-serif;}
#nav_foot a{width:105px;margin-top:2px;vertical-align:bottom;}
#nav * ul{list-style-type:none;padding:0;margin:0;}
#sub_nav_list{background-color:#000;text-align:right;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a{width:105px;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a,#sub_nav_list,#nav_foot{float:left;clear:both;}
.nav_item{height:2.2em;}
.sub_nav_item a{padding-bottom:.5em;min-height:1em;}
.selected a.nav_hlink{font:normal small-caps 900 98%/1em sans-serif;}
#nav_main * a:hover{background-color:#333; width:80%;margin:auto; }

This works fine in Firefox, doesn't look too good. I'm trying to figure something out so that when it's actived it looks kinda like the buttons used in a lot of linux console setup programs. Like the nvidia driver installer and the slackware setup buttons. Trying to figure out how to make this crapy looking site look better. I guess stupid "animations" based on linux console isn't the best way to go :P

Hi i was wondering if i could get a hand with some css i have, its working properly on firefox but its not working with explorer ( i have the ie7 patch)...

Ive included the css i think its #header3b1 causing the problem...

Code:

@charset "UTF-8";
/* CSS Document */

/* CSS Document */

body {
background-color:#F5E9D9; margin:0; color:#4D4747;
}
img {
	border:none;
}
div, h2, a, img, p {
	margin:0; padding:0;
}
.spacer {
	line-height:0; font-size:0; clear:both;
}
#frame {
width:761px;
height:895px;
background-color:#F5E9D9;
margin:auto; color:#4D4747;
}

#container1 {
width:751px;
height:142px;
padding-left:5px;
padding-right:5px;
float:left;
background-color:#F5E9D9; color:#4D4747;
}

#header1 {
width:185px;
height:142px;
background-color:#551001;
float:left; color:#4D4747;
}

#header2 {
width:280px;
height:102px;
float:left;
padding-left:24px;
padding-top:40px;
}

#header3 {
width:262px;
height:142px;
float:right;
}

#header3a {
width:240px;
height:43px;
background-color:#F5E9D9;
float:right;
padding-top:67px;
padding-right:22px;
text-align:right;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#AA8780;
}

.nav a{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#AA8780; background-color:inherit;
font-weight:normal;
text-decoration:none;
}

.nav:hover{
	color:#6D2517; background-color:inherit;
}

#header3b {
width:262px;
height:32px;
}

#header3b1 {
float: left;
width:185px;
height:350px;
background-color:#551001;
display: block;
}

#header3b2 {
width:50px;
height:32px;
background-repeat:no-repeat;
background-position:top right;
}

#container2 {
width:751px;
height:195px;
padding-left:5px;
padding-right:5px;
}

#container2a {
width:489px;
height:195px;
float:left;
}

#container2b {
width:260px;
height:193px;
border:1px solid #F2DBBA;
float:right;
}

#container2b1 {
width:220px;
height:Auto;
margin:auto;
padding-top:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
}

.container2b2 {
width:200px;
height:22px;
padding-left:20px;
margin:auto;
}

.links {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#551001; background-color:inherit;
font-weight:bold;
text-decoration:none;
}

.links:hover {
	color:#C15740;background-color:inherit;
}

#container3 {
width:751px;
height:350px;
padding-left:5px;
padding-right:5px;
}

#container3a {
width:151px;
height:498px;
background-color:#551001;
float:left; color:#4D4747;
padding-left:34px;
}

.container3a1 {
width:121px;
height:24px;
border-top:1px solid #AA8880;
padding-left:22px;
padding-top:7px;
}

#container3b {
width:304px;
height:495px;
float:left;
margin:0 0 12px;
overflow: hidden;
}
#container3bb {
width:550px;
height:495px;
float:left;
margin:0 0 12px;
}

#container3b1 {
width:240px;
height:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#4D4747;
font-weight:normal;
text-decoration:none;
margin:16px 32px 0px 32px;
text-align:justify;
line-height:14px; background-color:inherit;
}
#container3b1 h2 {
	height:33px; text-indent:-2000px;
	background:url(images/welcome.gif) 0 10px no-repeat;
}

.container3b2 {
width:240px;
height:28px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FF0000;
font-weight:normal;
text-decoration:none;
margin:0px 0px 0px 32px;
text-align:right;
background-color:inherit;
}
.container3b2:hover {
color:#830202; background-color:inherit;
}

#container3b3 {
width:227px;
height:28px;
padding-left:13px;
padding-top:9px;
margin:0px 32px 0px 32px;
text-indent:-2000px;
}

#container3b4 {
width:238px;
height:202px;
margin:0px 32px 0px 32px;
background-repeat:no-repeat;
background-position:top right;
}

#container3b4a {
width:100px;
height:176px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:14px;
padding-left:10px;
padding-top:15px;
}

.brown {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#7E1A02; background-color:inherit;
	text-decoration:none;
	font-weight:normal;
}
.brown:hover {
color:#3B0B00; background-color:inherit;
text-decoration:underline;
}

#container3c {
width:262px;
height:490px;
float:left;
margin:0 0 12px;
}

.container3c1 {
width:231px;
height:30px;
background-color:#AC3A02; color:#4D4747;
padding-top:7px;
padding-left:9px;
margin-top:22px;
}
.container3c1 h2 {
	background:url(images/specials.gif) 0 0 no-repeat; text-indent:-2000px;
}
.container3c11 {
width:231px;
height:30px;
background-color:#AC3A02; color:#4D4747;
padding-top:4px;
padding-left:9px;
margin-top:22px;
}
.container3c11 h2 {
	background:url(images/gallery_side.gif) 0 0 no-repeat; text-indent:-2000px;
}
.special {
	margin-top:55px;
}
.special h2 {
	background:url(images/some_specials.gif) 0 0 no-repeat; text-indent:-2000px;
}
#container3c2 {
width:233px;
height:350px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-image:url(images/special.jpg);
border-bottom:1px solid #F2DBBA;
border-left:1px solid #F2DBBA;
border-right:1px solid #F2DBBA;
background-repeat:no-repeat;
background-position:bottom left;
}
#container3c22 {
width:233px;
height:170px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#F2DBBA;
border-bottom:1px solid #F2DBBA;
border-left:1px solid #F2DBBA;
border-right:1px solid #F2DBBA;
background-repeat:no-repeat;
background-position:bottom left;
}
#container3c2a {
width:104px;
height:350px;
float:right;
padding-right:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02; background-color:inherit;
text-decoration:none;
font-weight:normal;
line-height:12px;
}

#container3c2a1 {
width:80px;
height:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
font-weight:normal;
text-align:justify;
float:right;
padding-left:24px;
}

.container3c2a2 {
width:188px; color:#4D4747;
height:179px;
background-color:#F5E9D9;
border-bottom:1px solid #F2DBBA;
border-left:1px solid #F2DBBA;
border-right:1px solid #F2DBBA;
padding-left:25px;
padding-right:25px;
padding-top:22px;
}

.img {
width:99px;
height:86px;
float:left;
}
.img1 {
width:99px;
height:79px;
float:left;
}

.text {
width:80px;
height:78px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02; background-color:inherit;
line-height:12px;
float:right;
text-align:justify;
}

.dummy  {
clear:both;
}

a {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7E1A02; background-color:inherit;
text-decoration:none;
font-weight:normal;
text-align:right;
}

a:hover {
color:#B25B46; background-color:inherit;
text-decoration:underline;
text-align:right;
}

.blank {
width:186px;
height:86px;

}

#container4 {
width:751px;
padding-left:5px;
padding-right:5px;
background-color:#F5E9D9; color:#4D4747;
margin:0px 0px 0 0px;
}

#container4a {
width:489px;
height:22px;
background-color:#E0E0E0; color:#4D4747;
float:left;
padding-top:10px;
}

#container4b {
width:262px;
height:22px;
background-color:#551001;
float:right;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
padding-top:10px;
}
#container4 p {
	text-align:center; clear:both; padding:15px 0;
	font:12px/18px Arial, Helvetica, sans-serif;
}
.scroller {
overflow-y: auto;
overflow-x: hidden;
}

any ideas, thanks

Hey people.

i have created a "fixed" toolbar for my website and runs fine in both safari and firefox... however in IE 6 and 7 the toolbar gets stuck and does not flow with the page. i used a fix which makes it apear in the right place this can be found he
http://tagsoup.com/cookbook/css/fixed/

here is the website so far, try opening it in both IE and another brouser too see the difference.
http://people.brunel.ac.uk/~dt08ajm/playgroundtest/

any ideas on how i can fix it? i can post the code if needed.

thanks in advance.

Hey guys, sorry if I'm asking something that's been addressed before, but just couldn't find an answer anywhere, and thought one of you genii might be able to help....

Anyway, I'm tackling my first CSS layout, and it's going pretty well so far. Cross-browser testing hasn't gone nearly as bad as I expected.

asiabackpacker.com/ai-resource/

But there's one problem I just can't figure out. Here's a screenshot: asiabackpacker.com/ai-resource/images/14015507.jpg

In Internet Explorer 6 on Windows XP, my header Div appears one pixel to the left. It looks fine on IE6 on any other OS, and even in IE 7 on Windows XP, but for some reason the IE6 + Windows XP combo is producing this weird result.

Is this a known bug that anyone's aware of, and is there any solution?

(btw, the forum rules made me strip the http's out of my urls....sorry bout that)

i have a div on a page that i want to be centered. i am using in css as
Code:

margin: 0 auto

that works fine and is centered in firefox, but is left aligned in internet explorer.
how to accompalish it in iexplorer ??

My website, currently http://12.214.26.185 does not render correctly in IE. It renders in Mozilla and Konqueror. I am posting my css file. Any advice would be greatly appreciated.

Hi,
I thought I fixed this problem before. In the videos playlist at the bottom, video description (background black). It needs to be positioned 20 pixels down. You will understand it better if you view it in Firefox.

http://pangeaadvisors.org/default.asp


Code:

#content #videos .playlist { float:left; width:442px; height:292px; margin:10px 0; background:#FFFFFF url(images/bg_videoplaylist.gif) repeat-x; background-position:-1px 0; border:1px solid #083684; position:relative; overflow:hidden; }
#content #videos .playlist .entries { position:absolute; width:10000em; height:60px; }
#content #videos .playlist .entries .video { float:left; width:422px; height:60px; font-size:14px; font-weight:bold; text-decoration:none; padding:20px; background:transparent url(images/player_entry.gif) 0 0 no-repeat; }
#content #videos .playlist .entries .playing {	background-position:0px -80px; }
#content #videos .playlist .entries .paused { background-position:-432px -80px; }
#content #videos .playlist .entries .progress { opacity:0.8; }
#content #videos .playlist .entries em { float:right; color:red; font-style:normal; margin:14px; }
#content #videos .playlist .entries .description { float:right; width:442px; height:212px; background:#000 url(http://flowplayer.org/img/player/btn/play_large.png) right bottom no-repeat; }
#content #videos .playlist .entries .description p { color:#FFF; width:422px; height:192px; font-size:12px; font-weight:none; text-decoration:none; padding:10px; position:absolute; }

Are there any good links that might show what type of styles IE will render on a list element? I'm having some trouble getting a navigation bar working properly. I'm only doing hovers on links, so the hover problem should not affect me, but I can't get any styles to apply other than "list-style." Even font size or color styles will not show up.

I have a div #footer at the bottom of a page.

All works except in MSIE (v6) where ol' Bill Gates decides to duplicate the #footer:
http://www.jobsinkent.com/v5c/home/index.php

If I remove the float:left from #footer it displays fine (but out of position!!) ... ideas welcome!!