|
CSS - Margin-bottom Doesn't Render In Ie7
http://dailyblogdose.com Above the image there is a bunch of links to the different pages, well on Firefox when you hover on them, there is a border-bottom underline. On IE7 however it disappears.
I could get them back by adding display:block; to #pages ul li a:hover however it makes them look slightly elevated. Any other ways? Similar TutorialsHi Guys, we're having some problems with common versions of IE (some versions work, some doesn't). In other browsers site works perfect. Link 1 Link 2 (forum) Screenshot Problem is, that IE stops rendering page at some point (half of the page). It just shows blank white space. We don't have any ideas what and why that happens. I think problem is somewhere in CSS file. Link to CSS file Where could be the problem? p.s. Refreshing site doesn't help, but changing IE window size (or setting to full screen mode), helps even without refreshing. Then page just loads. 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! 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 I seem to be missing the margin at the bottom of my subforums in IE. Works fine in FF. See the subforums, in IE the boxes are right up against the bottom instead of spaced out like in FF. http://mmogm.com/ Anyone please help me with the solution? Thanks in advance I cannot figure out how to get rid of the bottom margin on my body tag. It's driving me nuts. It's set to zero explicitly yet there's still a gap between the body tag and the bottom of the page. I don't think it's a browser bug since it happens in both FF and Opera. site: gohanman.com/cms/image/tid/3 (forum rules say I can't link) There has to be something simple, but I don't know any way to change the bottom margin other than setting margin-bottom... Code: html, body {
margin: 0;
padding: 0;
font: 62.5%/1.5;
}
#container {
width: 770px;
margin: 15px auto 15px auto;
background: white;
}
#headera {
height: 57px;
}
#nav {
background: white;
height: 28px;
}
#headerb {
height: 158px;
margin-bottom:10px;
}
#sidebar {
float: right;
width: 250px;
}
#content {
margin-right: 250px;
}
#footer {
clear: both;
background: white;
height: 50px;
}
IE is not recognizing the bottom margin for the container. The container is centered and 15px off the top of the page but the bottom of the container is not 15px off the bottom of the page. It works fine in other browsers. So, what IE bug is 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? 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;
}
this is bugging the hell out of me, cant find a working answer anywhere (i've tried a bunch of things) So I have 3 images for the top of my page and 3 images for the bottom. The page is enclosed in a div frame titled "frame" each of the 3 columns is enclosed in a frame "leftframe" "centerframe" and "rightframe" Each of the 3 columns has a top which is a fixed size image at the top, a middle which is just empty space for content to go, and a bottom which is a fixed size image at the bottom. Problem: I can't get any of the 3 column's bottoms to stick to the bottom of "frame" I've tried some code in here to do it and it doesn't work.. any help here? thanks! Code:
<style type="text/css">
body {
text-align:center;
height:100%;
min-height:100%;
padding:0px;
}
#frame {
width:800px;
height:100%;
min-height:100%;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
position:relative;
}
#contentlefttop {
width:155px;
height:282px;
padding:0px;
float:left;
background-image: url(images/layout_01.gif);
background-repeat:no-repeat;
}
#leftframe {
float:left;
width:155px;
position:relative;
height:100%;
min-height:100%;
}
#contentleft {
clear:left;
float:left;
padding:0px;
width:155px;
padding-bottom:270px;
}
#contentleftbottom{
width:155px;
height:270px;
/*clear:left;
float:left;*/
padding:0px;
position:absolute;
bottom:0;
background-image: url(images/layout_07.gif);
background-repeat:no-repeat;
}
#contentcenter {
width:486px;
padding:0px;
clear:left;
float:left;
text-align:center;
min-height:100%;
height:100%;
padding-bottom:53px;
}
#rightframe {
float:left;
position:relative;
height:100%;
min-height:100%;
width:159px;
}
#centerframe {
float:left;
position:relative;
height:100%;
width:486px;
}
#contentrighttop {
width:159px;
height:282px;
padding:0px;
clear:left;
float:left;
background-image:url(images/layout_03.gif);
background-repeat:no-repeat;
background-position:top;
}
#contentright {
clear:left;
float:left;
width:159px;
padding:0px;
height:100%;
padding-bottom:270px;
}
#contentrightbottom{
width:159px;
height:270px;
/*clear:left;
float:left;*/
position:absolute;
bottom:0;
padding:0px;
background-image: url(images/layout_08.gif);
background-repeat:no-repeat;
background-position:bottom;
}
#contentheader {
width:486px;
height:135px;
float:left;
background-image: url(images/layout_02.gif);
background-repeat:no-repeat;
}
#contentfooter {
/*clear:left;
float:left;*/
width:486px;
height:53px;
background-image: url(images/layout_09.gif);
background-repeat:no-repeat;
position:absolute;
bottom:0;
}
#sitemessage {
margin-left:17px;
margin-right:31px;
height:90px;
text-align:center;
font-size:12px;
}
#wisemanquote {
margin-left:22px;
margin-right:24px;
height:85px;
text-align:center;
font-size:12px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}
#contentright p { font-size:10px}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<div id="frame">
<div id="leftframe">
<div id="contentlefttop">
<div id="sitemessage"></div>
</div>
<div id="contentleft">Left</div>
<div id="contentleftbottom"></div>
</div>
<div id="centerframe">
<div id="contentheader"></div>
<div id="contentcenter">
<p>Center</p>
</div>
<div id="contentfooter"></div>
</div>
<div id="rightframe">
<div id="contentrighttop">
<div id="wisemanquote"></div>
</div>
<div id="contentright">Right</div>
<div id="contentrightbottom"></div>
</div>
</div>
Code:
<style type="text/css">
<!--
.inside {
background-color: #CC9;
border: thin solid #000;
margin: 20px;
float: left;
clear: left;
vertical-align: middle;
text-align: left;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.tit {
background-color: #FC0;
clear: both;
float: left;
width: auto;
margin-top: -10px;
border: thin solid #000;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding-right: 2px;
padding-left: 2px;
}
.lab {
text-align: right;
}
-->
</style>
<head>
</head>
<html>
<body>
<div class="inside">
<div class="tit">
Size
</div>
<br />
<table>
<tr>
<td class="lab">Width:</td><td><input name="pxWidth" type="text" value="250" size="6" /></td>
</tr>
<tr>
<td class="lab">Height:</td><td><input name="pxHeight" type="text" value="80" size="6" /></td>
</tr>
</table>
</div>
</body>
</html>
Could someone tell me why does this piece of code doesn't render the same way in IE as it does in Firefox. In Firefox everything is fine... I think it has something to do with the margin property of the .inside class [Edit] Sorry about the sloppy post. I actually resolved the issue. It had to do with the way IE understands divs. Thanks you for your reply 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 http://www.santeecooperobgyn.com/obgyn I have just begun to design a website and already I have run into bizarre (to me) behavior. In the horizontal navigation bar, when you run your mouse over it, you can see that the inline element is bigger than the block element container because the background color changes, revealing a small 2px or so size difference. Here is the relevant CSS. Code:
* { padding: 0px; margin: 0px; }
#navbar {
list-style-type: none;
margin-left: 0px;
background-color: #336633;
padding: 0em;
height: 2em;
margin: 0px;
font-size: 10pt;
}
#navbar li {
display: inline;
float: left;
padding: 0.5em;
}
#navbar li a {
color: white;
text-decoration: none;
text-transform: uppercase;
padding-left: 10px;
padding-right: 10px;
padding-top: 0.5em;
padding-bottom: 0.5em;
vertical-align: baseline;
line-height: 100%;
}
#navbar li a:hover {
background-color: #669966;
I have no idea why this happens, unless the inline element content height is actually determined by factors other than the line-height. It seems like the total height should sum to 2em in both cases. Hi all, Wanted to put this to some experienced devs and just ask, why is IE8 screwing my floats!? :'( So sad.. Here's my file: Code: <html><head> <style media="screen" type="text/css"> body { margin:0; padding:0; border:0; background:#535353; font-family:"Cambria"; text-shadow: 0px 2px 1px #3b3b3b; } #masterwrap { width:100%; } #wrap { margin:2%; border:2px solid #3b3b3b; } h1 { color:#8c8c8c; font-size:2.3em; text-decoration: underline; } h2 { color:#8c8c8c; padding:0; margin:6; } h5 { margin:80; font-size:8em; color:#ffb142; text-shadow: 0px 2px 1px #3b3b3b; } #header { text-align:center; border-bottom:2px solid #3b3b3b; width:100%; height:80px; } #nav{ clear:both; text-align:center; width:100%; height:50px; border-bottom:2px solid #3b3b3b; } #left { float:left; width:50%; border-bottom:2px solid #3b3b3b; } #right { float:left; width:50%; border-bottom:2px solid #3b3b3b; } #fat { clear:both; width:100%; text-align:center; border-bottom:2px solid #3b3b3b; } #bottom { clear:both; text-align:center; width:100%; height:150px; border-bottom:2px solid #3b3b3b; } #footer { clear:both; text-align:center; width:100%; height:50px; } </style> </head> <body> <div id="masterwrap"> <div id="wrap"> <div id="header"><h1>header</h1></div> <div id="nav"><h2>nav</h2></div> <div id="left"><h2>left</h2></div> <div id="right"><h2>right</h2></div> <div id="fat"><h5>fat</h5></div> <div id="bottom"><h2>bottom</h2></div> <div id="footer"><h2>footer</h2></div> </div> </div> </body> </html>
just copy paste into a html to view. Ive been at this for almost 6 days, searched the realm for help, googled, IRC'd, worked side by side with templates - even a 2 column setup and for some reason it can't render in IE. Also looked at the Tan hack, whitespace hacks.. Would you be so kind to tell me what I can do to make this work in IE? You can find the CSS by clicking Valid CSS, and html as you know- source. Thanks dearly Site Newb Disclaimer: I know a little about CSS, but I'm just now making the conversion over from tables. The answer may be obvious, but I still can't see it. I have a list that I'm trying to get to render correctly between browsers. I keep running into the same problem. First of all, the link is: frontlinescreative.com/aljc2/indexCSS.html In the top right column I've got a list of three menu items, with subnavigation underneath. When you hover over the list item, the colors change, and all is well with the world. This works cross-browser. My problem is positioning. In Firefox and IE the list is flush against the blue box at left. In Safari and Opera it's about 30 some-odd pixels shifted to the right. Any ideas on where I've gone wrong? I am sooooo annoyed with this! I have designed all of my pages with the same template however 2 of my pages seem to be roughly 10 pixels wider even though they all have a width of 940 pixels. www . toolboxstrategies . com/test/brauer Pages: Home, Communities & The Brauer Way are perfect but pages Our Region and Contact seem to be slightly wider than the rest.. How can that be when my header, body and footer all have a width of 940px? Tried to fix this for HOURS but I can't figure out what is causing it! Thank you!!!!!! I'm trying to create a block quote like in the image below: http://www.norrislakevillas.com/images/block-quote-sample.png The quotation marks sit in the bottom right corner of a 50 X 45 px transparent PNG image with 10px of spacing on the top and left. The element is rendering correctly with the exception of the background image, it just won't show up. CSS Code: Code:
#block_quote{
float:left;
width:400px;
background:#f7f7f7;
background-image:url(images/quote-top.png) left top no-repeat;
margin:50px 0 100px 53px;
border:1px solid #ccc;
}
#block_quote p{
font:italic 14px segoe ui, arial, sans-serif;
color:#5f5f5f;
line-height:1.4em;
margin:0;
padding:20px 15px 20px 60px;
}
Any ideas why the image isn't rendering? Thanks I have a dev server Fedora 7 LAMP setup. I have a simple css tag for font size 1.2em. It looks fine. When I push it up to production (unknown server) at GO Daddy the font is HUGE. I am sure the code is the same. If I view it in Firebug all looks well. There are also a couple of other strange things like margins being off a couple of pixels here and there. My question is do different versions of Linux or maybe Apache cause CSS to render differently? Hi folks Hoping a CSS expert out there might be able to assist. I am relatively new to css and have produced a site with fluid css to render on windows and mac at 800x600 and 1024x768. The site looks fine in IE (5.5, 6 & 7), Firefox & Navigator. In Opera, it is fine at 800x600, but does not render properly at 1024x768 Also, I have tested the site with browsershots and it doesn't appear to render properly on mac / safari. I am guessing it is something to do with #text ? Do I need to clear: or something like that? If you can help, I would be grateful. Thanks in advance Sol www. waihekemagicmassage.com And: /magic.css Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> </head> <body> <div style="background-color: red;"><input type="radio" id="radio"></div> </body> </html> Viewing this simple test page in a broswer shows that IE and Mozilla both vertically align the radio button differently within its "box" as well as giving it a different number of pixels of padding and/or margin on all 4 sides. Are there any tricks to getting consistency? |
|||||||