Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2005
    Location
    Spain
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Double float margin bug...

    Hi,

    I seem to have a double float margin bug in IE. For this 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:

    Code:
    #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;
    }

  • #2
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Hi Sofie,

    http://warpspire.com/tipsresources/w...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

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    check out here.

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

    Frank

    also the url's below -
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Regular Coder
    Join Date
    Jun 2005
    Location
    Spain
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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...

  • #5
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    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:
    Code:
    #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

    Regards,

    Drew

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder
    Join Date
    Jun 2005
    Location
    Spain
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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"?

  • #8
    Regular Coder
    Join Date
    Jun 2005
    Location
    Spain
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Hi,

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •