|
CSS - One Div Is Longer Than The Other?
hey all, i have a very wierd problem! Im no CSS guru but i thought i could get this right
i have two divs that should both be 100% so i have set them to width:100% BUT....in both Moz FF and IE there is a difference... it is less noticable in IE than in FF but still, not great and kinda wierd!! can anyone adise me please? here is the code Code:
#TitleBar {
position:absolute;
top: 0px;
left: 0px;
/*margin: 0px 0px 10px 0px;*/
padding: 0px 0px 0px 0px;
padding-left:10px;
width:100%;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:170px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color: #A4AA54;
border-top: 1px #A4AA54 solid;
border-bottom: 1px #A4AA54 solid;
border-width:1px 1px; /* top and bottom borders: 1px; left and right borders: 0px */
background-color:#A4AA54;
background-image:url(../images/logo/gglogo.JPG);
background-position: 1% 2px;
background-repeat:no-repeat;
z-index:0;
/* This is a fix for IE% */
voice-family: "\"}\"";
voice-family:inherit;
height:170px;
width:100%; /* the correct height */
}
/* "be nice to Opera 5" */
body>#TitleBar {height:170px; width:100%;}
#MenuBar {
position:absolute;
top: 137px;
left:0px;
width:100%;
padding:15px;
background-color:#667138;
border-bottom:1px solid #A4AA54;
line-height:17px;
z-index:1;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%;}
thanks in advanced RF Similar TutorialsMy site can be seen he pioneer.nic.edu/~mdmoffet/index.html The CSS is located at pioneer.nic.edu/~mdmoffet/church.css The problem is pretty apparent if you look at the page - the text flows down and beyond the div it is in, and the background/border of the div just randomly stops. I've put height:100% and min-height:100% in all parent elements for it, but that doesn't seem to be working as I expected it to. I'm honestly not sure what to do at this point - if the text is less than the viewport, the div will cover the full length like it is supposed to, it just seems to break at a certain length. Both my html and my css validate. Any ideas? Hi, I'm pretty new to this so not 100% sure what I'm talking about. I'm trying to complete a university project, in order to do so I have to move images using a style sheet and have done so successfully so far but today when trying to move my rollovers the stylesheet didnt move my images. Previous images I moved worked but the new ones dont. Any help would be greatly appreciated! Thanks! As box1 is filled with content I need box 2 & 3 to stretch to the same height, and so on for box 2 & 3. view page: http://www.franklandmedia.com/test <html> <head> <title>nothin</title> <style type="text/css"> <!-- body { text-align: center; margin: 0px; padding: 0px; min-width:780px; /* stop mozilla sliding off the edge */ } .central { margin-right: auto; margin-left: auto; position: relative; width: 780px; text-align: left; } #container { float: none; margin: 0 auto; width: 780px; text-align: left; } #top { float: left; width: 780px; background-color: #DDD; } #navbar { float: left; width: 780px; background-color: #EEE; } #middle { float: left; width: 780px; } #footerblock { float: left; width: 780px; background-color: #666; } #box1, #box2, #box3 { float: left; width: 260px; } #box1 { background-color: #AAA; } #box2 { background-color: #BBB; } #box3 { background-color: #CCC; } --> </style> </head> <body><div class="central"> <!--*******page content start*******--> <div id="container"> <div id="top">top</div> <div id="navbar">navbar</div> <div id="middle"> <div id="box1">box1<br>box1<br>box1</div> <div id="box2">box2</div> <div id="box3">box3</div> </div> <div id="footerblock">footer</div> </div> <!--*******page content end*******--> </div></body></html> Has anyone else experienced this? I have a div with a specified width of 503px. If I fill it with text, after about a screens worth it's physically 506px in IE (it's fine in every other browser). Anyone any ideas what could be causing this, or a solution to this problem? Many thanks Please let me know if i've posted in the wrong forum... and I apologize in advance in case I have. I've built a site using Apache and PHP. On my local laptop, (which is windows xp professional) everything looks great and my styles are being picked up. When i copy my code over to our unix server, none of the styles are being picked up. I know that Unix is case sensitive but the part thats "failing" is the proper case. I'm not sure what else I can check for.... here's the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>test.ca</title> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> </head> <body bgcolor="#FFFFFF" text="#404040" link="#0000FF" vlink="#990099" MARGINWIDTH="1" MARGINHEIGHT="1" TOPMARGIN="1" LEFTMARGIN="1" RIGHTMARGIN="1"> <link type="text/css" href="style/menu.css" rel="stylesheet"> <link type="text/css" href="style/gencontent.css" rel="stylesheet"> And in my gencontent.css, i have the following entry for the BODY tag: Code: body{
list-style: none inside;
font-family: verdana, arial, helvetica, sans-serif;
background-color: #D2E2F0;
}
ok at Rodoslovlje I have an issue. The menu on the left is most of the times longer then the right content part. Is there a way to fix that when this occurs I can make the right part move along without editing every page and hitting enter 20 times? Thnx |
|||||||