...

View Full Version : IE is creating margins



GSimpson
11-28-2008, 02:55 AM
Ok so I have a container that contains another div thats 230px and floating left and a picture floating right thats 480px. The div would be 240px to fill the 720px div but because Ie is creating a weird margin (3px from right and 3px from below) i had to make it smaller. Anyway, I've included a supporting picture to help me explain.

http://img339.imageshack.us/img339/3808/internetexplorerfixqt1.png

The top picture is perfect apart from the width of the left div. The right div is perfectly positioned. However in internet explorer, for some reason there is like a margin or padding (no idea what it is). Here are the css styles for the divs:



div#navigation {
width:720px;
height:150px;
clear:both;
display:table;
margin-left:auto;
margin-right:auto;
margin-top:none;
margin-bottom:40px;
background-color:black;
background-image:none;
}

div#navigation-list {
width:230px;
height:150px;
float:left;
display:table-cell;
padding:0px;
background-color:white;
background-image:none;
}

div#navigation img#navigation-image {
width:480px;
height:150px;
float:right;
display:table-cell;
padding:0px;
background-color:#111111;
border:none;
}



I don't quite know what's causing it to create these margins, can someone please help? If you need more info, just let me know. Thanks in advance.

If I Were A Boy
11-28-2008, 05:23 AM
Try this:

* {
margin: 0px;
padding: 0px;
}

jhaycutexp
11-28-2008, 05:31 AM
for me, first you must correct your css syntax, cause there are errors

like this...



padding:0px;


and even this is wrong..


Try this:

* {
margin: 0px;
padding: 0px;
}


then if that doesn't work, i suggest to count the sum of the widths you are styling.. as i see it, the rounder corner thing is a fixed with image, right? there's a black space there, simply because, when you applied margins and paddings you should always take into consideration, what width you have declared..

but i see that you used auto in your margins.. maybe its just the typo i placed up there..

oh my bad, the rounder corner thing was a floated image... not a fixed width image..

good luck...

abduraooft
11-28-2008, 08:06 AM
Hi GSimpson, could you post a link to your page?

GSimpson
11-28-2008, 08:24 AM
http://smurfworks.freehostia.com/Private/v1.0/tutorials/

abduraooft
11-28-2008, 08:46 AM
There is no point in talking about the cross browser issues before fixing the errors in your markup, see http://validator.w3.org/check?uri=http%3A%2F%2Fsmurfworks.freehostia.com%2FPrivate%2Fv1.0%2Ftutorials%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

First and foremost, you must have a valid DOCTYPE (http://www.alistapart.com/stories/doctype/) at the top!

GSimpson
11-28-2008, 10:27 AM
Ok then, I'll go sort all of that out then come back and bump up the thread if there is still internet explorer issues. Which I really believe will still be there.

abduraooft
11-28-2008, 10:57 AM
Which I really believe will still be there. May be, but we will be able to find out a reliable solution then.

GSimpson
12-01-2008, 06:54 AM
Ok, so I realise now that IE7.0 is a more standard-reliable browser than IE6.0 and by setting a doctype and charset, I was able to fix the problem for 7.0. The only browser still giving me issues is IE6.0, is there a commonly heard of bug with 6.0 that will fix it?

I have googled it, but did not find any results to suit this situation.

abduraooft
12-01-2008, 07:42 AM
html>body div#navigation a {
width:230px;
height:24px;
float:left;
padding-left:0px;
padding-right:10px;
background-color:#333333;
background-image:none;
border-top:none;
border-bottom:solid 1px #666666;
color:#888888;
font-size:10px;
font-family:"verdana",sans-serif;
text-decoration:none;
text-align:right;
line-height:25px;
}
div#navigation a {
width:240px;
height:24px;
float:left;
padding-left:0px;
padding-right:10px;
background-color:#333333;
background-image:none;
border-top:none;
border-bottom:solid 1px #666666;
color:#888888;
font-size:10px;
font-family:"verdana",sans-serif;
text-decoration:none;
text-align:right;
line-height:25px;
}
Your way of applying CSS in conditional comment for IE is not good. What's the use of repeating the same styles in another stylesheet? It makes very hard to know which styles are active and there by makes it hard to debug.

I don't see any use for your ie-fixes.css. So have a try by removing your conditional comment and then changing your default.css like

div#navigation {
width:720px;
height:150px;
clear:both;
/* display:table;*/
margin-left:auto;
margin-right:auto;
margin-top:none;
margin-bottom:40px;
background-color:black;
background-image:none;
}
div#navigation-list {
/* width:240px;*/
height:150px;
/*float:left;
display:table-cell;*/
margin-right:490px;
padding:0px;
background-color:white;
background-image:none;
}
div#navigation a { /* changed html>body div#navigation a , I'd recommend you to remove all selectors like html>body to make it compatible for IE too*/
/*width:230px;
height:24px;
float:left;*/
display:block;
padding-left:0px;
padding-right:10px;
background-color:#333333;
background-image:none;
border-top:none;
border-bottom:solid 1px #666666;
color:#888888;
font-size:10px;
font-family:"verdana",sans-serif;
text-decoration:none;
text-align:right;
line-height:25px;
}

Good luck!

GSimpson
12-01-2008, 08:34 AM
The point of IE-Fixes.css is to fix padding issues with IE. Because IE interprets it different from other browsers, by not adding the padding on, it just puts it on the original width/height. So that stylesheet is required. I need IE to be looking at it's own style and thats why I have html>body in the other one. To stop IE from going over what I set for it in the fixes stylesheet but still getting all the other elements styled in default.css that do not have a "html>body" prefix.

abduraooft
12-01-2008, 08:55 AM
Umm.. you may need to add
*{
margin:0;
padding:0;
} into your CSS.

To stop IE from going over what I set for it in the fixes stylesheet but still getting all the other elements styled in default.css that do not have a "html>body" prefix. I know the use of that selector, but I don't find that much use in your page.

GSimpson
12-01-2008, 09:33 AM
If I don't have the selector in use, then IE will use that stylesheets instead of the IE-Fixes one. Therefore not implying the padding on the selected elements. And they are required, not to be in a separate stylesheet, but that helps me keep the coding clean.

abduraooft
12-01-2008, 09:49 AM
Believe me... (take a backup and)Just remove the link to that CSS for a while and all the html>body from the selectors. Also add the style in my above post and re-upload them. Let's try to find a better solution.

GSimpson
12-02-2008, 08:38 AM
Hey mate, I did what you said, and for some reason internet explorer now renders padding the exact same way as Firefox etc. What caused that?

Also the bug seems to have gone away apart from a small bottom margin on #navigation-image, which I'm sure I can fix with zoom etc.

Thank you so much.

abduraooft
12-02-2008, 08:47 AM
Hey mate, I did what you said, and for some reason internet explorer now renders padding the exact same way as Firefox etc. What caused that?

Most probably the universal selector used to remove all the default margins and padding of browser from all elements

* {
margin:0pt;
padding:0pt;
}

Oh.. I missed an important point. To make a 2-column layout, there is no need to apply floats and widths to both columns. Instead, just apply a float and width to either of one(it's easy to apply for the smaller one) and then apply an adequate margin for the other one. (after that never apply a width to any of the inner block level elements of either columns, unless they are not supposed stretch inside their container)

Check http://bonrouge.com/2c-hf-fluid.php



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum