|
CSS - Margin Rendered Inconsistently In Netscape 6.2
Greetings,
I'm hoping to a few more sets of eyes on the problem I'm experiencing as I'm sure there is a simple solution that I am overlooking. Look at http://test.budonk.com/template.php?gn=workwedo in IE 5.5+, Netscape 7, Firefox, Safari - anything but Netscape 6.2 (windows). You will see that everything appears to be in place. Now if you look at the same page in Netscape 6.2, you will see that the text of the buttons below the logo on the left ("strategy development", "visual design", etc.) do not line up on their background as they should. See attached screen shots as well. The spacing between the images is being controlled by the "margin" style. And for some reason, it is rendering more of a top and bottom margin than specified in the stylesheet (see http://test.budonk.com/style.css - .sNavImg). I've had other experiences similar to this in the past that ended up being an issue with the whitespace within the HTML that was sent down to the browser (the images are dynamically added on the server using PHP), but this does not appear to be the case here. Any, I've been racking my brain for 2 days on this to no avail. If anyone could take a look and see if you can find what I'm missing, I'd be most appreciative. Thanks Similar TutorialsWhy is the Menu on my site not aligned right like it is in IE. and the image is to the right of the logo in Netscape, where as it is ok in IE. http://impactinvesting.loadedtechnologies.com What do i do??? Thanks I have this site http://cahedev.nmsu.edu. If I navigate this site with Firefox, Opera or any MacOs browser, things are fine. It looks good. Then enter Microsoft, IE forgets that there is a css page needing to be viewed with the page. Any ideas? Those asking for clarification, please visit the site with IE and you can see better than me trying to explain it. This problem is in Internet Explorer. Here's the first page that looks the way it should: http://www.invistation.com/invite_me/contact.php And here's the other page, that references the same css file, but rendered differently: http://www.invistation.com/invite_me/resetpass.php My CSS File: http://www.invistation.com/invite_me/css/index2.css What gives? It doesn't make any sense why the form on the resetpass page is shifted more to the right than the form on the contact page. I'm using the same div for the two forms. 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;
}
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! 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 there, I have recently stumbled about a problem I had with another website I made as well, but since it was at the very bottom back then I kinda ignored it. My new website has this right in the header though, and so I decided to ask for help. Works perfectly in Gecko based browsers, though. I have the problem that I have to Div's right after each other which both have a top and bottom margin of zero, but there is a visible gap between them, only in IE though (header and content as well as content and footer) and in Opera 7.54 at the very bottom. The colors of the background PNG are also broken in IE, never mind that, will exchange that with a JPG. Website in question is http://cyxxon.com, WordPress with my own template. Had the same problem with a website completely handcoded by me. Any ideas? Thomas I have made some pages with css styling. This works perfect with IE, but he just ignores the css styling in netscape. An example, I made an tumbnail from a picture, set the size in css, works perfect in IE, but he ignores it in netscape. See example http://www.bvkb.be/BVKB/Sportklimme...finale/test.php Can anywhone help me how this comes. On another page he takes some of the css, en some not. Thanks i'm new at CSS, and the width works fine in IE but not in Netscape. I'm trying to get #bottomLeftFirst1 to be the same width as #bottomLeft, but for some reason #bottomLeftFirst1 is wider in Netscape. Thanks! #bottomLeft { position: absolute; width: 175px; height: 100%; padding: 0; margin: 0; } #bottomLeftFirst1 { border-width: 1.5px; border-style: none none none none; width: 175px; margin: 0; padding: 5px 0 5px 10px; } When I use padding in a box it increases the width of the box by the amount of the padding when viewed in NS. IE won't. Anybody know of a good solution to this problem? Code:
<html>
<head>
<style type="text/css">
.box1{
position: absolute;
top: 20px;
left: 40px;
width: 50px;
height: 30px;
border-width: 1px;
border-style: solid;
}
.box2{
position: absolute;
top: 55px;
left: 40px;
width: 50px;
height:30px;
border-width: 1px;
border-style: solid;
padding-left: 10px;
}
</style>
</head>
<body>
<div class = 'box1'>
box 1
</div>
<div class = 'box2'>
box 2
</div>
</body>
</html>
Thanks hi, i have used nested divs and with overflow: scrolll and it works perfectly fine in IE but it has no effect in Netscape. how do i achieve the same in netscape without using iframes? thanks in advance... Hello all, When trying to position:absolute an object within another relatively positioned and left floated in netscape 7.1, for some reason the contained element ignores the parents position:relative property and goes to the top left edge of the body. Try www.signplanning.com in Netscape 7.1 and you will see that compared to I.E. the left-side is pushed up and it should look like the Internet Explorer. Thanks in advanced. BAF Hi, I was curious to know why only the background shows up in Netscape. In IE this site works good. I had it working on Netscape before but now it doesnt. Thanks I discovered something today, that NS defines the root containing block as being html whereas IE uses body. That being said, look at this code in both browsers and tell me how you would position the black box so it is in the same location on both browsers - Here is the 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" lang="en" xml:lang="en"> <head> <meta name="GENERATOR" content="Microsoft FrontPage 5.0" /> <meta name="ProgId" content="FrontPage.Editor.Document" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title>Navigation</title> <style type="text/css" media="screen"> html{ height:100%; } body { margin: 0; padding: 0; font: 85% arial, hevetica, sans-serif; text-align: center; color: #000; background-color: #00f; height: 100%; border: 0px solid red; } #container { margin: 0px auto; width: 770px; height: 100%; bottom: 0px; text-align: center; background-color: #f00; background-image: url('images/keybg.jpg'); background-repeat: no-repeat; border: 0px solid red; layer-background-color:red; } #mainnav { float: left; width:130px; height:100%; vertical-align: middle; position: relative; layer-background-colorurple; background-colorurple; } #mainbod { float: left; width:640px; height:100%; vertical-align: middle; position: relative; layer-background-color:aqua; background-color:aqua; top:0px; } #banner { float: left; width:640px; height:100px; vertical-align: middle; position: relative; layer-background-color:green; background-color:green; top:0px; } #test{ position:absolute; layer-background-color:black; background-color:black; width:150px; height:30px; top:85px; right:0px; border:1px solid red; } </style> </head> <body> <div id="container" > <div id="mainnav"> hello </div> <div id="mainbod"> <div id="banner"> <div id="test"> </div> </div> hello </div> </div> </body> </html> Hi, This is the first day i am tackling css. Please Explain why my site is looking different in netscape as opposed to IE, (ie is the correct look). This is the link http://www.eac.net.au/remax/template1/new_apartment.htm . I am also attaching my css file, let me know if i am on the right track for using CSS THANKYOU uno_turko I've been trying get a template working to transfer my site over to CSS (I've been reading about it and it seems to be the way to go) - have been working on it all weekend and have cracked a 3 column grid that seems to work well. You can see where I've got to he http://www.discographynetwork.com/nav2.php The only small problem I have in ie is a missing pixel to the left of the home button. If you have a suggestion for that I'd be grateful. However, when I looked at it in Mozilla and Netscape the buttons mess up and the tag line doesn't stay in it's div. Can someone point me in the right direction. Thanks. Hello all, Wondering if those of you who love netscape more than I do can help me, This is a little css script to get a bg image to show in the top right hand corner of a table the table Its called from <td class="rightnav"> Is there something that I i have done that makes netscape not display the image? I'm resonably new to Css, but I have a pretty good handle on it, just not with what netscape supports. Does it have to be called in a <p> tag? I have tried this and a <Div> tag but it wont display, but in Explorer it is fine ... I'd apreciate any suggestions its really frustrating .rightnav { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; background-image: url(images/continued.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: top right; height: 100%; white-space: normal; display: block; overflow: hidden; } any help apreciated =) - Shell. |
|||||||