|
CSS - Help Troubleshooting Some Css
I am fairly new to .css but am trying to make my site 100% css formatted. One of my test pages is up at:
http://www.nikdaum.com/artnew/poems.htm The issue lies in the grey navbar at the top. It's container's width is set to scale to 100% of the containing block, the white column, and inside this block is another block that is centered horizontally. Everythng works fine on Safari and Firefox on MAC, but in IE on PC the bar doesn't span the whole width and instead pushed to the left leaving a pretty wide gap on the right side. Any advice would be appreciated. The .css file for the navbar is at http://www.nikdaum.com/navbar.css But the css for rest of the page is in the html file. Thanks alot, Nik Similar TutorialsHere is my entire code causing this bug. I have simplified it considerably from the actual code where I am experiencing the problem. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>Lorem ipsum dolor sit amet & Lorem ipsum dolor sit amet</title>
<style type="text/css" media="screen">
div#page {
position: relative;
}
div#branding-main {
position: absolute;
bottom: 14px;
left: 9px;
}
</style>
</head>
<body>
<div id="page">
<div id="branding-main"><a href="#"><img src="https://secure.footprint.net/xscmsn/c/hotmail/hotmail77x19.gif" width="130" height="120" alt="" /></a></div>
<div id="main">
<div class="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <img width="276" height="110" src="http://www.google.com/intl/en_ALL/images/logo.gif" /></p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <img width="276" height="110" src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif" /></p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laboreet dolore magna aliquyam erat. <img width="276" height="110" src="http://www.ctan.org/tex-archive/documentation/visualFAQ/source/lorem-ipsum-logo.png" /></p>
</div>
</div>
</div>
</body>
</html>
Basically what you have there is a main wrapping DIV (div#page) set as relatively positioned, with a DIV inside it (div#branding-main) absolutely positioned near the bottom left of "div#page". It works fine in every browser and (usually) in IE6. The problem is that in 1/30 of page reloads in IE6 the absolutely positioned DIV will be assigned an incorrect value for the BOTTOM property, and will be rendered in the wrong spot on the page. I can't seem to be able to tell what is causing this. It seems like removing one of the DIVs that the content is wrapped in stops it from happening...but I can't say for sure. Also, since this bug is time-dependant, I have added the superflous text and images to give the page a larger profile. The original page I was working on when I discovered this bug is much more graphically rich, and seems to invoke the bug more often than this dumbed down page. I don't think this is directly related to hasLayout, as I am fairly certain I have exhausted that possibility by adding hasLayout to every relevant element. However, giving "div#page" a height larger than the height of the content (ie. an explicit height not dependant on the length of the content) seems to prevent the bug. Giving an explicit width to "div#page" doesn't make a difference. Moving the "div#branding-main" to the bottom of the document seems to prevent the bug as well. However, I'm hoping there is a solution without changing the HTML in such a major way. Please help! I am creating a page where I will list OS names, and when I mouse over the name I would like to display the versions in the database for the corresponding name. The problem I am having is that I'm trying to use span to display the versions but I keep getting a document.all.menu1.style is null or not an object. Here is my code. I don't seewhere it's not working since I got this code from a tutorial and the tutorial code works just fine. <STYLE TYPE="text/css"> #menu1 { display : none } A:link {color:black; text-decoration:none} A:hover {color:blue; text-decoration:underline} </STYLE> <td bgcolor="#DCEBEB"> <SPAN onMouseOver="document.all.menu1.style.display = 'block'" onMouseOut="document.all.menu1.style.display = 'block'"> <img src="../../images/plus.gif">AIX<br> </SPAN> <SPAN ID="menu1" onClick="document.all.menu1.style.display = 'none'"> <img src="../../images/minus.gif"><a href="http://www.test.com">Testing 1</a><br> <img src="../../images/minus.gif"><a href="http://www.yahoo.com">Testing 2</a><br> <img src="../../images/minus.gif"><a href="http://www.cnn.com">Testing 3</a> </SPAN></td> I have a three column layout currently. The left and right column contain borders to the central column where all of the website content is planned to be. The problem that I have is that I do not want the left and right border columns to be in the windows scrollable area. For example, If someone views the site using an 1024x768 resolution, the page currently loads with a scroll bar at the bottom. To be able to see all of the central column, you have to scroll over slightly. If the right and left column were not in the scrollable area, the middle column would be 100% visible on load and also you would be able to see half of the right and left border. Any help would be greatly appreciated. I understand that what I am asking for is not that clear and any problems please say and I can draw a diagram. Cheers Ok, well I guess the real problem here is my lack of understanding on exactly how different browsers interpret CSS. I found a tutorial about Swordfish CSS menus, seemed simple enough but when I tired to add some styling to it the whole thing became a huge mess. It looks great in IE, but netscape totally ruins it. Makes me wanna just go back to using tables http://dev.dreamhost.com/test.html If someone can see an immediate problem here, or can suggest a better way of making cross browser pull-downs it would be greatly appreciated. Basic premise: Top of pull down will be a graphic Pull down part will be html/css Pull down part will have a margin of 4px, and the bg color will cover 100% so it looks like a regular roll over. |
|||||||