|
CSS - Ie6 Leaves Huge Margins Between Div's, Not Double Margin Or 3px Error...
Hey there,
webbsdomain.com/Max I am working on a landing page for a client and I am a bit stuck. All XHTML and CSS validates, no issues there.... The design looks and works great in ALL browsers other than IE6. The issue is with the 3 colored divisions, secondLeft, secondMiddle, and secondRight. In IE6 there is a HUGE amount of white space left between the div's with no reason that I can find. I researched the issue online and found similar issues: IE6 3px float bug and IE6 double margin bug Neither of which seem to be the issue, and the fixes they describe do not work. I am completely at a loss on this one, and any guidance anyone can offer would be VERY useful! Thanks in advance, Brian Similar TutorialsCan someone please help me? I am trying to get my left side column to meet my footer image... just like on this website: newcastlegateshead.com See how they side bar goes all the way down and meets the footer? Mine has a one inch gap between the bottom of the column and the footer. Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss Thank you so much... Hi all Take a look at this in Firefox and then in IE7: http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't. Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem. I did a search and found this link: http://www.positioniseverything.net/explorer/floatIndent.html Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way? Thanks a lot for help :-) Josh Hi all Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
</head>
<body>
<table style="margin-bottom: 10px;" cellspacing="0" cellpadding="0">
<tr>
<td>asdf</td>
</tr>
</table>
<p style="margin-top: 10px;">asdf</p>
</body>
</html>
Why do the margin-bottom of the table and the margin-top of the p not collapse (only tested in Firefox2)? Why is there 20px between them? I don't understand the world of margins anymore... Is this an exception or a bug or what? Thanks for help, Josh Hi! Could some experienced CSS developer please confirm this: All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px). However, bottom & top margins never combine. Is all this true? I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>. Code: html, body {
margin:0px;
padding:0px;
background-image:url(images/interface/background.png);
}
#body_image {
width:935;
margin:0 auto;
padding:0px;
background-image:url(images/interface/body.png);
background-repeat:no-repeat;
background-position:center;
}
#container {
width:904px;
height:750px;
margin:15px;
}
#slug {
height:15px;
}
Code: <div id="body_image"> <div id="container"> <div id="header">Header</div> <div id="nav">Nav</div> <div id="sidebar">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </div> The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background. i am using display:none to hide two divs, but the space where they are located still remains... but only in firefox... here is a link... it happens when you click on one of the tabs at the bottom of the box... 15 Games thanks for any help. Hi everyone. I have a strange problem which get's on my nerves for a long time and it usually makes me keep on using tables instead of css. It has to do with floating images inside another div or td. I have, let's say, a td which contains 2 pictures. I want the first picture to be at the left side and the other one at the right leaving space in the middle. So I just have the following code: Code: <td class=top width="936" height="52"><img src="images/left.jpg" style={float:left;}><img src="images/right.jpg" style={float:right;}></td>
I also have declared the following in the style definition: Code: td.top {background:url(images/back.jpg) repeat;padding:0;margin:0;}
td.top img {padding:0;margin:0;}
So I test my page and although it appears ok on firefox a strange thing happens on Explorer. Both pictures leave some blank space on their side just like if I had added 2-3 pixels of side margin. It is even more annoying that the float:left img leaves a space on it's left side and the float:right img on it's right one. Notice that the table has both cellpadding and cellspacing set to 0. Thank you in advance for your time. Hello, I need a little help... When moving an image over the top of another image it leaves a white space where the image was in the flow. How do I get the trailing content to flow into the space where the image was. Even though the image moves where I want, it still seems to occupy the space where it was? PHP Code: echo "<IMG SRC='http://www.golfleague.us/gifs/splash.gif' width='150' height='90' STYLE='position: relative; top: -133px; left: 380px; margin:0; z-index:1'>"; Thanks for your help. Safari 1.2.3 (or so) will display my multi-level CSS-driven menus/ The third-level is set to display with a background color over a text area with a different background. When the user clicks or mouses-off the third-level menu, there is about a 3px vertical remnant of that menu left on screen. What can I do to prevent this? I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? Hi All, This seems to be a bit of a recurring problem for me in a lot of the new CSS designs I'm trying... but it seems that IE interprets both padding and margins differently than how firefox interprets them. Sometimes it seems to do it the same, and other times differently. Take a look at this: http://zeroonedesign.com/beta/newsite/index.html CSS he http://zeroonedesign.com/beta/newsite/style.css Now look at it first in Firefox (the desired effect) and then in IE. IE seems to be incapable of understanding this particular piece of the code Code:
#menu {padding-top:140px;text-align:left;padding-left:38px;}
#menu ul{margin:0px;}
#menu ul li{display:inline;margin-right:10px;padding:5px 7px 5px 7px;color:#fff;}
#menu ul li a{color:#fff;font-size:10pt;text-decoration:none;}
#menu ul li a:hover{color:#fff;font-size:10pt;border-bottom:3px solid #fff;}
#menu ul li a.selected{color:#f88000;font-size:10pt;border-bottom:2px solid #f88000;}
Ideas? Help? I know the box model is different for IE than it is for FF but I've tried the box model hack and it doesn't seem to do anything. Background info: - I have validated the page and CSS, no problems there - Site is working properly in Firefox and IE, seems to be a margin issue in Safari -This margin issue is not the common Safari bug with a negative margin being applied to a floated element -I am using Safari in a windows environment, I do not have a Mac The problem: -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari? The website: http://www.lisa-noble.com/test/redo.html The HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Site Test</title>
<link rel="stylesheet" type="text/css" href="redo.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
</head>
<body>
<div id="top_filler">
</div>
<div id="left_filler">
</div>
<div id="right_filler">
</div>
<div id="top_left">
</div>
<div id="header">
</div>
<div id="top_right">
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Etc, etc, etc....</p>
</div>
<div id="bottom_filler">
</div>
<div id="bottom_left">
</div>
<div id="bottom_right">
</div>
</body>
</html>
The CSS Code: * {
margin: 0;
padding: 0;
}
body {
background: #fdd9e9;
}
div#top_filler {
background: url(images/bg_slice_sm.png) repeat-x;
width: 100%;
height: 164px;
position: fixed;
top: 0px;
z-index: 5;
}
div#left_filler {
background: url(images/left_slice_sm.png) repeat-y;
width: 174px;
height: 100%;
position:fixed;
left:0px;
z-index: 5;
}
div#right_filler {
background: url(images/right_slice_sm.png) repeat-y;
width: 161px;
height: 100%;
position:fixed;
right: 0px;
z-index:5;
}
div#bottom_filler {
background: url(images/bottom_slice_sm.png) repeat-x;
width: 100%;
height: 76px;
position: fixed;
bottom: 0px;
z-index: 5;
}
div#header {
position: fixed;
top: 0px;
left: 37%;
height: 125px;
width: 316px;
margin: 0 auto;
background: url(pink_logo2.png) no-repeat;
z-index: 25;
}
ul.NoBulletNoIndent {
list-style-type: none;
margin-left: 0px;
padding-left: 0px
}
div#top_left {
height: 314px;
width: 221px;
background: url(images/left_top_corner_sm.png) no-repeat;
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
}
div#bottom_left {
height: 175px;
width: 176px;
background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
left: 0px;
z-index: 5;
}
div#top_right{
height:174px;
width:174px;
background: url(images/right_top_corner_sm.png) top no-repeat;
position: fixed;
top:0px;
right: 0px;
z-index:5
}
div#bottom_right{
height: 602px;
width:198px;
background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 5
}
div#content {
margin: 40px 164px 0px 180px;
position: relative;
z-index: 1;
}
Heya guys, Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done. I've got this in style.css file: Code: /* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}
.topform {
position: absolute;
right: 5px;
top: 65px;
width: 300px;
font-size: 10px;
font-family: myriad, verdana, sans-serif;
text-align: right; }
input, form {
font-size: 11px;
font-family: myriad, verdana, sans-serif;
margin-bottom: 0px;
margin: 0px; }
/* End of SEARCH Bar */
Which refers to this part of my index.php page: Code: <!-- Top right SEARCH -->
<div class="topform">
<div class="lb_bl">
<div class="lb_br">
<div class="lb_tl">
<div class="lb_tr">
<form name="form" id="form" method="post" action=""><input name="search" type="text" />
<input name="search" type="button" value="SEARCH" /></form>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- End of top right SEARCH -->
But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com Thanks in advance to anyone who can help - Gaz Hi! Should I do this? p { margin-top: 2em; margin-bottom: 2em; } or this: p { margin-bottom: 2em; } Same question for headers (h1, h2, etc) Thanks! i'm working on the following page, and I've now just noticed that it doesn;t look right in IE 6....It looks ok in Mozilla and IE 7 though... Anyway, if you look at it in IE 6, you'll see the text is HUGE....I tried to alter the font property in the body{} of my CSS (in a conditional comment), but that didn;t do anything... I'm sure's it's a tiny something or the other somewhere that's making it do that...perhaps my template is conflicting with the blog software...I dunno for sure, and my screen is starting to get fuzzy (meaning i need to take a break), so maybe one of you can pinpoint the problem... Thanks. Hi, Got my validation problem sorted (Thanks jarra) but now my page has a problem with IE6. Well, it had the problem yesterday but I thought I fixed it. If you view the page in Firefox and Opera the first image is about 10px break away from the text above, however in IE6 it's at least 100px away. It doesn't matter what image I use or where I put, it's always the first image. When it happened yesterday I reduced the width of the image by 2 pixels and eveything seemed fine. Is it a CSS problem? CSS: http://www.planetphillip.com/style.css Page: http://www.planetphillip.com/index.php TIA Phillip i am currently making a page which makes use of some JS that swaps between three div containers by changing the display to hide on all but one... anyhow... i here is the page.. if you click on "best reviews" it adds a huge gap but if then click on "worst reviews" the gap disapears clicking back onto "best reviews" the gap is gone too... it is very tricky... i've used this JS before, and it worked fine... and it this page looks and acts fine in IE6... i just thing the space of one of the containers is remaning, even tough it is being hidden... here is the page... i've put a 1px dashed #900 border around all divs so as to make it easier to debug... Mini Catalog I'm having trouble with a layout issue. Position is fine in IE, but in Firefox and Mozilla there's a 55 pixel gap on this drop down list and an even larger gap when the list is expanded. Here's my css for the navbar: /* Navbar */ #nav { width: 158px; margin-left: 0; } #nav ul { font-family: "Trebuchet MS", serif; font-size: 11px; margin-left: 0px; list-style-type: none; } #nav ul li ul { margin-left: 12px; } Any suggestions or help would be appreciated. Hi, Sorry to keep posting questions here! THe transition from tables to CSS has been arduous so far. This page has a huge gap in the center in Firefox - looks fine in IE. I figure it's caused by the #rightnav and the right float. I just can't figure out how to fix it. I can keep it open by throwing in a load of <p> </p>, but that defeats the purpose I'm starting to think I should throw in the towel and go back to tables!!! check this page Cheers hello all, i'am at complete loss for now. my site promodivin uses mootools to enrich it by adding slides and accordeon effects. Works great with IE and FF but using Safari it displays huge blank sections. My text's gone. It's even clearer on the 'Services' tab where I can see some narrow sections. To make the effects work, you may click on the headers and it should collapse the appropriate section. I believe the issue stems from the ids used only for the purpose of mootools. Here's an html exerpt from the frontpage: Code: <div id="h_toggle1"><a href="#"> <h1>Communication</h1> </a></div> <div id="horizontal_slide1"> <ul class="bullet_point"> ... and the titre_toggle.css describing the elements used. Code: h3.section {
margin-top: 1em;
}
#vertical_slide1, #horizontal_slide1,
#vertical_slide2, #horizontal_slide2,
#vertical_slide3, #horizontal_slide3 {
background: #E6EAEF;
margin-top: 0;
padding: 10px 10px 0 10px;
border: 1px solid #D5D8DD;
}
#h_toggle1, #h_toggle3, #h_toggle2 {
}
div.marginbottom {
/* Since the Fx.Slide element resets margins, we set a margin on the above element */
margin-bottom: 10px;
}
I'll appreciate any insight. safari 4.0.3 --> KO IE 6+ --> OK FF 3.5 --> OK mootools 1.2.4 joomla 1.5.15 |
|||||||