|
CSS - Firefox/ie Margin Problems
on this page the image on the left that reads "Grade" is 10px from the side (where it should be) in IE... but in firefox, it isnt 10px from the side... but rather 0px... when i change the margin-right to 20px instead of 10px, it looks fine in Firefox, but 10px too far over in IE.
any help would be GREAT thanks Similar TutorialsHello, I'm having a slight issue with what I belive to be margins. In IE half the logo is being cut off and in firefox I have a grey area above the menu bar that shouldn't be there. I have checked both my css and xhtml both validated fine with out any warnings. I'm pretty new to CSS and this is starting to annoy me =\. **WARNING** The site is political in nature. Links to the code: h**p://www [.] dncreform [.] com / t / css / main.css h**p://www [.] dncreform [.] com / t / Thank You, William yui.lastsong.net/projecthealth I'm having problems getting the above page to show up correctly in IE6. My headers have a negative left margin and, for some reason, paragraphs below these headers seem also to be displaying this negative margin. It doesn't happen for all paragraphs, and I haven't been able to discern any pattern. The following page is an example of this: yui.lastsong.net/projecthealth/?page=team-staff Additionally, this page is misaligned, despite using essentially the same coding from my other pages (with the exception of the content): yui.lastsong.net/projecthealth/?page=impact-families Any ideas on how to fix this? Hello, I don't understand how to fix this right margin problem in IE 6. Of course, the code renders correctly in FF Mac/Win but I can't get the margin right to correctly display as 30px in IE 6. If you can help me out I would appreciate it. Code: #altnavcontainer
{
margin: 68px 30px 0px 0px;
padding: 0;
width: 264;
float: right;
/*border: 1px solid red;*/
}
<div id="altnavcontainer">
<a href="info.php?pt=info" onmouseover="document.info.src=info_on.src" onmouseout="document.info.src=info_off.src"><img name="info" src="images/info_off.png" alt="Info Off" /></a>
<a href="bio.php?pt=bio" onmouseover="document.bio.src=bio_on.src" onmouseout="document.bio.src=bio_off.src"><img name="bio" src="images/bio_off.png" alt="Bio Off" /></a>
<a href="work.php?pt=work" onmouseover="document.work.src=work_on.src" onmouseout="document.work.src=work_off.src"><img name="work" src="images/work_off.png" alt="Work Off" /></a>
<a href="index.php" onmouseover="document.home.src=home_on.src" onmouseout="document.home.src=home_off.src"><img name="home" src="images/home_off.png" alt="Home Off" /></a>
</div>
Thanks, Jason Problem 1: I specified #pic with a height of 176px and a border of 1px. The total height should be 178px, correct? Measuring it with my handy web developer ruler, it only measures 176px tall, including the border or 174px excluding the borders. Why would this occur? Aren't borders supposed to go around an element not be included in the element? This occurs in both Firefox and IE. Problem 2: Same problem area as above, except I'm attempting to add 3px left and bottom margin around several #pic. Using my trusty ruler again, I'm getting a margin of only 1px around my #pic's. Instead, it appears that the margin is including the 1px border from the two #pics, totaling 3px. This only occurs in Firefox though, IE renders it as I would have guessed. This means that the .right content doesn't line up in either IE or Firefox, depending on which one I correct it for. Below is a picture to explain what I'm attempting to say. Here is the code (sorry I'm building it for a friend and he is working on a host -- so its local only): Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body
{
background-color: #615947;
}
#container
{
width: 800px;
margin: 10px auto;
color: #333;
}
#nav
{
}
#navcontainer {
padding: 0;
height: 35px;
}
#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
width: 154px;
height: 16px;
}
#navcontainer ul li a
{
position:relative;
background: #AE0000;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
padding: 8px;
margin: 0 0 0 0;
color: #f5d7b4;
text-decoration: none;
display: block;
text-align: center;
font: 13px/15px Verdana,Arial,Helvetica,sans-serif;
font-weight:bold;
}
#top
{
background-color: #AD9F7F;
background-image: url(<a href="(URL address blocked: See forum rules)" rel="nofollow">(URL address blocked: See forum rules)</a>);
background-repeat: no-repeat;
height: 150px;
width: 767px;
margin-bottom: 3px;
}
.left
{
display:inline;
border: 1px solid black;
background-color: #fff;
float: left;
width: 385px;
margin-bottom: 3px;
padding: 0;
margin-right: 3px;
}
#updates
{
height:539px;
}
#topleft
{
margin: 0px;
height: 14em;
border-bottom: 1px solid black;
}
#topleft h3
{
background-color: #9E9E9E;
margin: 0px;
color: white;
font-family: sans-serif;
padding-left: 12px;
font-size: 12px;
}
#bottomleft
{
height: 309px;
margin: 0px;
overflow: auto;
}
#bottomleft h3
{
background-color: #9E9E9E;
margin: 0px;
color: white;
font-family: sans-serif;
padding-left: 12px;
font-size: 12px;
}
.right
{
margin-left: 385px;
padding: 0;
width: auto;
background-color: #615947;
}
.pic
{
width: 186px;
height: 176px;
margin: 0px 3px 3px 0px;
border: 1px solid black;
float: left;
background-color: #616161;
}
#footer
{
clear: both;
margin: 0;
color: #333;
background-color: #AD9F7F;
border: 1px solid black;
width: 767px;
}
</style>
<title>CSS</title>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="navcontainer">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">THE ARTIST</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">GUESTBOOK</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="left">
<div id="topleft">
<h3>Welcome</h3>
</div>
<div id="bottomleft">
<h3>Daves daily news</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
</div>
<div class="right">
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Image link http://lh5.ggpht.com/_zKwoPOwgFUM/SyNwWAxR0ZI/AAAAAAAAAKI/CzOKCNVox3E/prob.jpg Hi, beeing fairly new to CSS I am having a hard time solving this issue, hopefully it has a simple solution which someone might help me with. Here goes, In IE this page aligns nicely at the top of the browser window just like I want it to, but in FF and Opera the whole page is moved down maybe 5px or so, the code is pasted below. Also, it seems to me that IE stacks the layers tighter, bordder to border, than FF and Opera which seems to add padding or margin to the layers. I am probably way off but I would be extremely happy for any help. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<style type="text/css">
html{
margin:0px;
padding:0px;
}
body {
background: #FFF;
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size:62.5%;
text-align:center; /*fix for centering the content div for IE 5.5*/
}
#content {
width:748px;
margin:0px auto;
padding:0px;
text-align:left; /*IE 5.5 alignment fix*/
}
#tipsHeader{
height:113px;
background:#FFF url(images/Logo.gif) no-repeat top left;
margin:0px;
padding:0px;
}
#tipsHeader h1 span {
display:none;
margin:0px;
padding:0px;
}
#bigProdDisplay{
width:448px;
height:298px;
text-align:left;
float: left;
}
#productSlogan{
width:300px;
height:298px;
background: #FFF url(images/squareHeaderParotid.gif) no-repeat top left;
margin:0px;
padding:0px;
text-align:right;
float: right;
}
#productSlogan h3 span {
display:none;
}
/*==========NAV STYLES============*/
#navcontainer{
margin-bottom:25px;
}
#navcontainer ul
{
padding-left: 0px;
margin-left: 0px;
background-color: #fff;
float: left;
width: 100%;
font-family: Verdana, arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.2em 1.2em;
background-color: #fff;
color: #4E5C8D;
text-decoration: none;
float: left;
font-size: 1.2em;
font-weight: normal;
}
#navcontainer ul li a:hover
{
background-color: #fff;
color: #F66;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
#home #navlist-home a,
#advantages #navlist-advantages a,
{
color: #F66;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
#home #navlist-home a:hover,
#advantages #navlist-advantages a:hover,
{
text-decoration: none;
}
#navlist a:active {
color: #333;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
/*======END NAV STYLES======*/
</style>
</head>
<body id="home">
<div id="content">
<div id="tipsHeader"><h1><span>Header text</span></h1></div>
<div id="bigProdDisplay"><img src="images/BigSmall.jpg" alt="" /></div>
<div id="productSlogan"><h3><span>mighty slogan hides behind image</span></h3></div>
<div id="navcontainer">
<ul id="navlist">
<li id="navlist-home"><a href="#">HOME</a></li>
<li id="navlist-advantages"><a href="#">ADVANTAGES</a></li>
<li id="navlist-application"><a href="#">APPLICATION</a></li>
<li id="navlist-conventions"><a href="#">CONVENTIONS</a></li>
<li id="navlist-contact"><a href="#">CONTACT US</a></li>
<li id="navlist-references"><a href="#">REFERENCES</a></li>
</ul>
</div>
</div>
</body>
</html>
First things first, both my HTML and CSS validate. I'm very VERY green with CSS, but because other people don't seem to think so I'm making a website. My trouble is with IE. The website is perfect in Firefox. I have this div: css Code: Original - css Code div.main { background-color: white; margin-left: auto; margin-right: auto; width: 35em; border-width: .1em; border-color: #aa505f; border-style: solid; text-align: left; } .alignment { text-align: center }
And this address stuff: CSS Code: Original - CSS Code address { background-color: #FFFFFF; margin-right: 5em; width: 15em; border-width: .1em; border-color: #aa505f; border-style: solid; float: right; line-height: 1em }
address {
HTML: HTML Code: Original - HTML Code <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "BLOCKEDURL"> <html> <head> <title> Le Sac Magique </title> <link href="lsmcss.css" rel="stylesheet" type="text/css"> </head> <body> <address> Contact XXXXX by mobile at XXXXXXXX, or <a href="mailto:XXXXXXX">email her at THIS BLOCKED EMAIL ADDRESS.</a> </address> <div class="alignment"> <div class="main"> This is some text! </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "BLOCKEDURL"> <html> <head> <title> Le Sac Magique </title> <link href="lsmcss.css" rel="stylesheet" type="text/css"> </head> <body> <address> Contact XXXXX by mobile at XXXXXXXX, or <a href="mailto:XXXXXXX">email her at THIS BLOCKED EMAIL ADDRESS.</a> </address> <div class="alignment"> <div class="main"> This is some text! </div> </div> </body> </html> In Firefox, it shows as it should a centered box with a white background and maroon border and a right-aligned box of the same description besides its italics. However, in IE the box that should be centered is pushed to the left a bit. It is as if the box is aligned left and has a left margin. I am aware that IE does not support margin:auto, but I have tried as you can see to fix it by using text-align:center and a parent div to no avail. Something tells me that my floated box is the source of this trouble, but I would not know where to start. Can anyone help me? Hi all, and thanks for reading. I'm doing my first big DIV-based design, and have got it working pretty well, except that I'm getting a fairly large top and slightly large bottom margin on one of the nested DIVs. This has a border running around it, so I really don't want it there. Here's the stylesheet: Code:
<style type="text/css">
BODY {margin:0; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:16px; background-color:#F1F1F1; text-align:center; background-image:url(images/background.gif);}
DIV {background-color:#FFFFFF;}
#container {width:800px; text-align:left; margin:0 auto; border-left:solid 6px #007EC3; border-right:solid 6px #007EC3; border-bottom:solid 6px #007EC3;}
#header {border-bottom:solid 6px #F1F1F1;}
#bodycontainer {border-bottom:solid 6px #F1F1F1; margin:0;}
#menucontainer {width:192px; float:left; clear:left; margin:0;}
#menucontainer DIV {border-top:solid 2px #CCCCCC;}
#contentcontainer {margin-left:192px; border-right:solid 6px #F1F1F1; border-left:solid 2px #007EC3;}
#contentcontainer P {margin-left:20px; margin-right:20px;}
#footer {text-align:center; font-size:12px; font-weight:bold; border-top:solid 2px #007EC3;}
#footer P {margin-top:5px; margin-bottom:5px;}
#footer A {color:#007EC3; text-decoration:underline;}
#footer A:hover {color:#007EC3; text-decoration:none;}
</style>
Here's the processed HTML: Code:
<div id="container">
<div id="header"><img src="images/header.jpg" alt="The International Wildlife Museum" width="800" height="110"></div>
<div id="bodycontainer">
<div id="menucontainer">
<div style="border-top:0;"><a href="info/" onmouseover="changeImage('info',true);" onmouseout="changeImage('info',false);"><img src="images/menu/4/info.gif" name="info" alt="General Info" border="0"></a></div>
<div><a href="about/" onmouseover="changeImage('about',true);" onmouseout="changeImage('about',false);"><img src="images/menu/4/about.gif" name="about" alt="About Us" border="0"></a></div>
<div><a href="exhibits/" onmouseover="changeImage('exhibits',true);" onmouseout="changeImage('exhibits',false);"><img src="images/menu/4/exhibits.gif" name="exhibits" alt="Exhibits" border="0"></a></div>
<div><a href="tour/" onmouseover="changeImage('tour',true);" onmouseout="changeImage('tour',false);"><img src="images/menu/4/tour.gif" name="tour" alt="Tour Info" border="0"></a></div>
<div><a href="education/" onmouseover="changeImage('education',true);" onmouseout="changeImage('education',false);"><img src="images/menu/4/education.gif" name="education" alt="Educational Programs" border="0"></a></div>
<div><a href="events/" onmouseover="changeImage('events',true);" onmouseout="changeImage('events',false);"><img src="images/menu/4/events.gif" name="events" alt="Special Events" border="0"></a></div>
<div><a href="membership/" onmouseover="changeImage('membership',true);" onmouseout="changeImage('membership',false);"><img src="images/menu/4/membership.gif" name="membership" alt="Membership" border="0"></a></div>
<div><a href="theater/" onmouseover="changeImage('theater',true);" onmouseout="changeImage('theater',false);"><img src="images/menu/4/theater.gif" name="theater" alt="Wildlife Theater" border="0"></a></div>
<div><a href="facility/" onmouseover="changeImage('facility',true);" onmouseout="changeImage('facility',false);"><img src="images/menu/4/facility.gif" name="facility" alt="Facilities/Rental" border="0"></a></div>
<div><a href="contacts/" onmouseover="changeImage('contacts',true);" onmouseout="changeImage('contacts',false);"><img src="images/menu/4/contacts.gif" name="contacts" alt="Contacts" border="0"></a></div>
</div>
<div id="contentcontainer">
<p>The International Wildlife Museum is a non-profit educational program of Safari Club International Foundation (SCIF). SCIF funds and manages worldwide programs dedicated to conservation, outdoor education and humanitarian services.</p>
<p>Founded in 1988, the museum is dedicated to increasing knowledge and appreciation of the diverse wildlife of the world, as well as explaining the role of wildlife management in conservation.<br> </p>
<div id="footer">
<p><a href="info/">General Info</a> | <a href="about/">About Us</a> | <a href="exhibits/">Exhibits</a> | <a href="tour/">Tour Info</a> | <a href="education/">Educational Programs</a></p>
<p><a href="events/">Special Events</a> | <a href="membership/">Membership</a> | <a href="theater/">Wildlife Theater</a> | <a href="facility/">Facilities/Rental</a> | <a href="contacts/">Contacts</a></p>
<p> <p><a href="http://www.safariclubfoundation.org/" target="_blank"><img src="images/sciflogo.gif" alt="SCI Foundation" width="52" height="39" border="0" align="absmiddle"></a>
<img src="images/footerinfo.gif" alt="Copyright 2004, Safari Club International Foundation" width="372" height="55" vspace="10" align="absmiddle"></p>
</div>
</div>
</div>
</div>
Here's a link to the live page The margin is above and below the text and menu. Any help would be appreciated. -colin Hey there I have a small IE6 problem where my "boxR" margin-left positioned div is moving more away from left than expected but works perfectly fine in FF. 3px more to the left to be exact. This is happening to my "boxL" div also (but only 1px more to the left than expected) CSS: Code: .bigBox {background-color:#eeeeee; width:800px; clear:both;}
.leftCol {width:240px; float:left; position:relative; display:block; background-color:tan;}
.rightCol {width:560px; float:left; position:relative; display:block; background-color:lightBlue;}
.boxL {width:230px; margin-left:7px; margin-top:5px; position:relative; display:block;}
.boxR {width:550px; margin-left:3px; margin-top:5px; position:relative; display:block;}
HTML: Code: <table class="bigBox" border="0" cellpadding="0" cellspacing="0"> <tr><td valign="top"> <div class="leftCol"> <div class="boxL">Content Goes Here...</div> </div> <div class="rightCol"> <div class="boxR">Content Goes Here...</div> </div> </td></tr> </table> Pictures of problem: FF: IE6: The 2 blue boxes are "boxL" and boxR" The background color "Tan" and "lightBlue" is the "leftCol" and rightCol" divs See how the "boxL" div has moved left 1px more and the boxR has moved 3px more to the left in IE6... how can i fix this? Thanks heaps Having a weird effect in firefox in that it doesn't seem to respect the right margin correctly. What I am trying to do is line up text so that it flushes to an image that is to the right, but for some reason it pushes the image off the page. (floatWrap is a clearing div so <br style="clear: both"> is not needed) Code: Code:
<div class="floatWrap">
<div style="float: right;">
<img src='imageSrc'>
</div>
<div id="txtWrap" style="float; left;">
<div class="floatWrap">
<div style="float; right;">
Some text which should be right up on the picture and to the left of the title
</div>
<div style="float; left;">
Title which will never reach the text next to the picture
</div>
</div>
<div>
Text that will reach the picture but for some reason pushes it out of the way instead of wrapping to the next line.
</div>
</div>
</div>
#txtWrap is the div that wraps the entire contents to the left of the image. I want this to flush all the way up to the image but give a buffer of 5px. I tried setting #txtWrap {width: 100%; margin-right: 5px;} but it pushes the pic off the screen. I am assuming this b/c a scroll bar at the bottom of the browser appears I tried setting #txtWrap {margin-right: 5px;} but the text within keeps pushing farther to the right than it's supposed to, causing the whole wrap to push the to the next line. Where can I set the margin-right property so it displays correctly? I want to implement margin notes with CSS. I want small notes in the margin which are vertically aligned with the lines in the main content box. The problem is when the notes are longer or there are many of them - THEY OVERLAP! [or at least i did not find any solution so they do not]. If the note is long [compared to the content] i would like something like that: Code:
very long | See NOTE in the margin, for this short line.
margin note |
is here and |
it should be |
rendered ok |
|
second note | Here it continues, so there is a plenty of
in margin | empty space above this paragraph - this is
| because we do not want margin notes to overlap.
I have been trying to find a solution myself and google the net, but unsuccesfully. There is a page about the problem at URL where you can find what i mean. Nevertheless at the bottom of the page they just say that the notes may overlap and give no solution to the problem. Unitl now i have tried tricks with float [but IE does not support clear: very well], with negative margins, and with display:table-xxx. The latest one is a solution to some extend, but you must enclose your text in several divs to let it work. I would like the solution with clean html code, so ideally one could do something like: Code: <p> <div class="note">here is the text of the note</div>See NOTE in the margin, for this short line. </p> or maybe [dt for notes, dd for text - looks strange, but quite ok for my pages] Code: <dl class="text_with_notes"> <dt>here is the text of the note</dt> <dd>See NOTE in the margin, for this short line. </dd> .... </dl> I would prefer clean CSS solution [no tables], but the must is that it works in most browsers [Mozzila, Opera, IE, Netscape>ver4 at least]. Thank you very much for any ideas in advance ... I will test any new idea, I need just a hint. Hope someone can advise me what's going on. I'm trying to make a page which has a div floated to the left of another div, which is absolutely positioned. There is another one floated to the right. I am using relative positioning to accommodate for different browser resolutions. This seems to work perfectly in FF and IE7 but IE6 seems to ignore the negative margin. Funny thing is that while the page is loading it is in the right place momentarily, but then it jumps back to the position it would be in without the negative margin. The page and the CSS all validates fine. <div id="main"> <div id="leftdiv" class="floatleft"> <p class="bold">Do you... </p></div> <div id="rightdiv" class="floatright"> <p class="bold right">Would you </p> </div> </div> #main { position: absolute; height: 70%; width: 70%; left: 5%; top: 100px; overflow: auto; } #leftdiv { position:relative; margin-left: -109px; top: 50%; margin-top: -160px; left: 20%; width: 198px; height: 299px; padding: 10px; } #rightdiv { position:relative; top: 50%; margin-top: -160px; right: 20%; margin-right: -109px; width: 198px; height: 299px; padding: 10px; } .floatleft {float:left;} .floatright {float:right; } Alright, for some reason, my site works fine in IE, but displays wierdly in Firefox and Opera. http://www.gamingfanboy.com Is there anything in my code that could be causing the display problems in Firefox/Opera? Edit: Just in case you were wondering, no, those aren't the final colors. I was just looking for some contrast. The main things I can point out a Can't seem to get the logo to over lap. Can't seem to get FF to recognize the margins, but somehow IE can. There are other problems but those are the main two. I need to get this: http:// devbum. com/coded/audven/ to look like this: http:// devbum. com/coded/audven/audven.png Any help is greatly appreciated! I know I'm not supposed to post links but there really is no other way to receive help with this problem otherwise. I have a menu that has no margins and I have a content box with has a margin-left of 79. Each menu item's length is 78 pixel, so I'd gradually guess that margin-left:78 would align the border of the menu item and the content box... Here's my problem. If I make it 78, it aligns in IE but not in Mozilla Firefox. When I make it 79, it aligns in Mozilla but not IE. Thanks in advance. Hi, First post on here! ...I have a problem with the default margin in IE being 1px less than Firefox. I've stripped my CSS down to be as naked as possible! It's quite frustrating as I'm quite experienced with CSS, I guess the small silly things do things like this when you've not been CSS'n for a few months! HTML:- Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> test </body> </html> CSS:- Code:
* { margin: 0; padding: 0; }
Please look at itsjustmelive.com in both firefox and internet explorer. When you roll over the "service" button in Internet Explorer the entire page moves down. Not in firefox because I specified a height. How do I fix this in IE? Thanks! Bev I've built a website using only div's and I am only having problems with one of them... I have the div with a margin-left : 48px; In IE this aligns the div with a section of text above it (the result I had wanted) however in Firefox it displays about 20pixels to the left of the IE display. If I set the margin-left : 96px; it aligns properly in Firefox but is then messed up in IE. I have an attachment of my code its not very large. Is there any fix for this problem? Hi all, I have a horizontal navbar using the old favourite ul/li html list with css doing the layout. Problem is that there is a difference of display between firefox and ie7. The li tag css is Code:
li{
background:url('../images/li_bg.gif') repeat-x #ff0000;
display:inline;
padding:0 5px 0 5px;
margin:0 2px 0 0;
}
List html is: Code: <ul> <li><a href="member.php">Home</a></li> <li><a href="profile.php">Profile</a></li> <li><a href="help.php">Help</a></li> <li><a href="logout.php">Logout</a></li> </ul> I reset margin and padding for all other tags in a general css file. The image is a 1px width gradient. Looks fine on ie7 but firefox seems to add an extra 2 or 3 pixels of margin. Used firebug to try and track down the extra but it highlights only the margin and padding I have specified and doesn't give any clues to the additional space. Have seen plenty of navbar tutorials but not with margin between list elements. Any help is much appreciated... I've build a little nav that seems to work perfectly in IE, but is hated by FireFox. Specifically it seems like firefox is ignoring my margin and padding settings. Can anyone tell me what I'm doing wrong? Thank you. Code: <html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding: 0;}
.NavContainer {
position:relative;
padding:0em;
width: 930px;
height: 27px;
margin:0em;
background-image: url(images/nav/navBg.gif);
background-repeat: no-repeat;
}
.NavLeftPad {
position:relative;
padding:0em;
width: 87px;
height: 27px;
margin:0em;
float:left;
background-image: url(images/nav/spacer.gif);
background-repeat: no-repeat;
}
.NavRightPad {
position:relative;
padding:0em;
width: 87px;
height: 27px;
margin:0em;
float:left;
background-image: url(images/nav/spacer.gif);
background-repeat: no-repeat;
}
.Nav2pxPad {
position:relative;
padding:0em;
width: 2px;
height: 26px;
margin: 1px,0px,0px,0px;
float:left;
background-color:#54636D;
}
.NavLink {
font-size:12px;
color:#FFFFFF;
font-family:arial,helvetica,sans-serif;
text-decoration:none;
font-weight:normal;
line-height: normal;
}
.NavBlock {
position:relative;
padding: 7px,3px,0px,0px;
height:26px;
margin: 1px,0px,0px,0px;
float:left;
background-color:#54636D;
text-align: right;
}
.NavWhatIsDermalounge {width:126px;}
.NavOurTreatments {width:125px;}
.NavOurClinicians {width:115px;}
.NavLocations {width:92px;}
.NavTechnology {width:96px;}
.NavAboutUs {width:94px;}
.NavMakeover {width:96px;}
-->
</style>
<script language="JavaScript">
// On/Over state color #E46804 orange
// Off state color #54636D nav-gray
var theNavState = 'NavWhatIsDermalounge';
apAddLoadEvent(NavInit);
function apAddLoadEvent(aponfunc) {
var apoldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = aponfunc;
} else {
window.onload = function() {
apoldonload();
aponfunc();
}
}
}
function NavInit(){
if (theNavState != '') {
document.getElementById(theNavState).style.backgroundColor = "#E46804";
}
}
function NavRollOver(theElement){
document.getElementById(theElement).style.backgroundColor = "#E46804";
}
function NavRollBack(theElement){
if (theElement != theNavState) {
document.getElementById(theElement).style.backgroundColor = "#54636D";
} else {
document.getElementById(theElement).style.backgroundColor = "#E46804";
}
}
</script>
</head>
<body>
<div id="NavContainer" class="NavContainer">
<div id="NavLeftPad" class="NavLeftPad"></div>
<div id="NavWhatIsDermalounge" class="NavBlock NavWhatIsDermalounge"><a href="what_is.html" onMouseOver="NavRollOver('NavWhatIsDermalounge');" onMouseOut="NavRollBack('NavWhatIsDermalounge');" class="NavLink">What is dermalounge</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavOurTreatments" class="NavBlock NavOurTreatments"><a href="treatments.html" onMouseOver="NavRollOver('NavOurTreatments');" onMouseOut="NavRollBack('NavOurTreatments');" class="NavLink">Our treatments</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavOurClinicians" class="NavBlock NavOurClinicians"><a href="clinicians.html" onMouseOver="NavRollOver('NavOurClinicians');" onMouseOut="NavRollBack('NavOurClinicians');" class="NavLink">Our clinicians</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavLocations" class="NavBlock NavLocations"><a href="locations.html" onMouseOver="NavRollOver('NavLocations');" onMouseOut="NavRollBack('NavLocations');" class="NavLink">Locations</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavTechnology" class="NavBlock NavTechnology"><a href="technology.html" onMouseOver="NavRollOver('NavTechnology');" onMouseOut="NavRollBack('NavTechnology');" class="NavLink">Technology</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavAboutUs" class="NavBlock NavAboutUs"><a href="about.html" onMouseOver="NavRollOver('NavAboutUs');" onMouseOut="NavRollBack('NavAboutUs');" class="NavLink">About us</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavMakeover" class="NavBlock NavMakeover"><a href="makeover.html" onMouseOver="NavRollOver('NavMakeover');" onMouseOut="NavRollBack('NavMakeover');" class="NavLink">Makeover</a></div>
<div id="NavRightPad" class="NavRightPad"></div>
</div>
</body>
</html>
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 |
|||||||