...

View Full Version : Double float margin bug...



Sofie
05-21-2008, 11:02 AM
Hi,

I seem to have a double float margin bug in IE. For this (http://www.sofielyr.com/indextest.html) page.
It's the slideshow and the "main" box that jumps about three pixels to the left.
I have tried to solve it by setting the display element to "inline" but then it just hoppes to the right side... Anyone?

The CSS code is here:


#container {
background-position: center bottom;
background-image: url(bb11.gif);
padding-top: 205px;
margin-right: auto;
margin-left: auto;
background-repeat: no-repeat;
width: 1022px;
display: inline-block;
}
#container #logo {
width: 1022px;
height: 50px;
margin: auto;
text-align: center;
font-family: "Century Gothic";
font-size: 36px;
color: #CC6600;
line-height: 10px;
text-transform: uppercase;
font-weight: lighter;
padding: 0px;
}
#container #logo img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0px;
}

#container #navigation {
text-align: center;
padding: 0px;
height: 30px;
width: 856px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

#container #nav {
font-family: "Century Gothic";
font-size: 24px;
color: #DC5700;
text-transform: uppercase;
font-weight: lighter;
margin: 0px;
list-style-type: none;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 5px;
display: inline;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #DC4A00;
}
#container #navigation ul {
height: 24px;
}

#container #slideshow {
height: 200px;
float: none;
width: 853px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
br {
display: none;
}

#container #nav li {
border-right-width: thin;
border-right-style: dotted;
border-right-color: #C43604;
display: inline;
color: #CE3200;
margin: 0px;
clip: rect(auto,10px,auto,auto);
padding-top: 0px;
}
#container #navcon {
color: #DC5700;
font-family: "Century Gothic";
font-size: 24px;
font-weight: lighter;
text-transform: uppercase;
display: inline;
list-style-type: none;
padding-left: 5px;
height: 24px;
}
#container #nav a {
color: #DC5700;
text-decoration: none;
}
#container #navcon a {
color: #DC5700;
text-decoration: none;
}
#container #navcon a:hover {
color: #FFCC99;
}
#container #nav a:hover {
color: #FFCC99;
}
#main {
height: 500px;
width: 853px;
padding: 1px;
color: #DC5700;
background-color: #DC3E00;
margin: auto;
background-image: url(bg3wa.gif);
background-repeat: repeat;
border-top-width: medium;
border-top-style: solid;
border-top-color: #CF3302;
}
#container #footer {
background-color: #FFCC66;
height: 100px;
width: 856px;
margin: auto;
clear: both;
font-family: DaunPenh;
font-size: 24px;
font-weight: bold;
color: #330000;
text-align: center;
background-image: url(footbg.jpg);
background-repeat: no-repeat;
background-position: bottom;
}
#container #main #right h1 {
font-family: DaunPenh;
font-size: 36px;
line-height: 20px;
font-weight: bold;
}
#main #left {
float: left;
height: 100px;
width: 390px;
padding: 0px;
background-color: #FFCC66;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 20px;
}
#main #right {
height: auto;
width: 380px;
float: right;
background-color: #FFCC66;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
font-family: "Century Gothic";
font-size: 14px;
color: #DC3E00;
}

FWDrew
05-21-2008, 11:29 AM
Hi Sofie,

http://warpspire.com/tipsresources/web-production/css-column-tricks/

^^That helps me a lot with strange margin bugs. Have you tried putting overflow:hidden?

Anyway, check out that link, hope it helps :)

Regards,

Drew

effpeetee
05-21-2008, 12:24 PM
check out here.

http://exitfegs.co.uk/IEBugs.html

Frank

also the url's below -

Sofie
05-22-2008, 10:50 AM
Hi guys,

Thanks for your replies.. I have tried the main things that they recommend but no luck.. It's not actually a float.. I have set the properties for the div that holds the slideshow to "float:none" and the margins of that div are set to "auto" to make it always come in the centre.. It is driving me crazy!

I don't know if it has something to do with the "object" tag that is the slideshow... but then again the same problem occurs in the "main" div further down...

FWDrew
05-22-2008, 11:42 AM
Hi again

First, FYI, the slideshow and main section are off to the right a little in FF also.

Anyway, I was messing around with your code using firebug and was able to change the padding on 2 of your divs to make it look how I believe you want. Again, this was only in FF and using firebug editor so I havent actually tested it.

Here is what I changed/added:


#container #slideshow {
height: 200px;
float: none;
width: 853px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 15px;
padding-right: 29px;
padding-bottom: 0px;
padding-left: 0px;
}
#main {
height: 500px;
width: 853px;
padding: 1px 29px 0px 0px;
color: #DC5700;
background-color: #DC3E00;
margin: auto;
background-image: url(bg3wa.gif);
background-repeat: repeat;
border-top-width: medium;
border-top-style: solid;
border-top-color: #CF3302;
}


Heres a screenshot of what the effect was: http://drewsdesigns.com/codingforums/codingforumSS.png

I dont have IE, so this may not be the fix your looking for, however, it does make it appear nice in FF. Worth a try :thumbsup:

Regards,

Drew

abduraooft
05-22-2008, 12:25 PM
Sofie, using the same value for id attribute for more than one element is invalid!
<li> must be a child of either <ol> or <ul>.

After all, no need to give an id/class for all elements, since we can easily write nested CSS rules, say
ul#nav li , ul#nav li a etc.

Sofie
05-22-2008, 01:06 PM
Thanks Drew!

I did what you did...

But should it really be necessary to put padding in when I have set it all to "auto"?

Sofie
05-22-2008, 01:07 PM
Hi,

Yes I am aware of that! will be on the case asap!!:o



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum