|
CSS - Ie Float Model Bug
After reading some docs I'm pretty sure this is the float model bug in IE6? Either that or the Box model bug. How do I go about fixing this? If you look at the code and render it, the very top box is off to the right about 3 pixels in relation to the two boxes below it. I read somewhere how to fix this but I dont remember where the article was.
Any help would be appreciated...ripping my hair out Code:
<HTML>
<HEAD>
<title>
Test
</title>
<style>
.defaultText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
color: #000000;
background-color: #EEE;
font-family: Verdana, sans-serif;
font-size: smaller;
margin: 10px 10px 0px 10px;
}
.titleText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000000;
}
.addModuleText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
.moduleTitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
}
#bodyWrapper {
border: 1px solid #000;
background-color: #559CEC;
width: 100%;
}
#container {
float: left;
width: 100%;
margin-right: -260px;
}
#content {
padding-top: 0px;
margin-right: 260px;
}
#left {
position: relative;
left: 5px;
width: 250px;
float: left;
}
#middle {
margin-left: 250px;
padding: 0px 7px 10px 10px;
}
#sidebar {
float: right;
padding-top: 0px;
padding-right: 5px;
}
#footer {
background: #999;
border: 1px solid #cecea5;
clear: both;
}
#module {
position:relative;
width: 100%;
padding: 2px;
background: #FFF;
border: 1px solid #000;
font-size: 10px;
margin-bottom: 8px;
}
#title {
background-color: #C2DBF5;
padding: 3px;
border: 1px solid #144678;
text-align: left;
color: Black;
font-weight: bold;
font-size: 14px;
}
#moduleItem {
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
#moduleItem h1 {
font-weight: bold;
font-size: 12px;
margin-bottom: 0px;
}
#moduleItem p {
margin-top: 0px;
margin-bottom: 10px;
}
#module #footer {
background-color: #C2DBF5;
border: 1px solid #144678;
padding: 4px;
text-align: left;
color: black;
font-weight: normal;
font-size: 10px;
}
</style>
</HEAD>
<BODY>
<DIV id="bodyWrapper">
<DIV id="addNewModule"></div>
<DIV id="container">
<DIV id="content">
<DIV id="left"></DIV>
<DIV id="middle">
<div id="module">
<div id="title"><span id="_ctl0_Title_lblTitle">test</span></div>
<div id="moduleItem">
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>
<h1>Test</h1>
</td>
</tr>
</table>
</div>
</div>
<div id="module">
<div id="title"><span id="_ctl1_Title_lblTitle">Homework files</span></div>
<div id="moduleItem">
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>
<h1>Text1</h1>
</td>
</tr>
</table>
</div>
</div>
<div id="module">
<div id="title"><span id="_ctl2_Title_lblTitle">Some Module Title</span></div>
<div id="moduleItem">
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>
<h1>Text2</h1>
</td>
</tr>
</table>
</div>
</div></DIV>
</DIV>
</DIV>
<DIV id="sidebar">
</DIV>
</div>
</form>
</BODY>
</HTML>
Similar Tutorialssubject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) Hi There - Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about. Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section. Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later. Then there's the next section. Rounded corners. Contains the entire page. On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section. Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links. ---------- First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back. Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section. If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug. So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu. --------- It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners. Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow. Code: <div id="top part" logo and searchbox </div> <div> that pesky space that disappears in IE when roll over primary links </div> <div id=navcontainer> dropdown and tabbed menu </div> <div id="navigation" class="menu> <!-- couldn't find the menu class in the css --> <div id="primary" class="clear-block"> contains barmenu - very fussy </div> </div> Here's the relevant CSS: Code:
div#navigation {
background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}
#primary {
line-height: 30px;
}
#primary ul {
padding:0;
margin:0;
list-style:none;
}
#primary li {
display:inline;
}
#primary a {
font-weight:bold;
display:block;
float:left;
padding:0px 14px 0px 14px;
margin: 0px 1px 0px 0px;
font-size: 95%;
}
#primary a {
background-position:0% 0px;
}
#primary a:hover {
text-decoration: none;
background-position:0% -42px;
}
#primary a.active {
background-position: 0% -84px;
}
#primary a {
background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
color:#666666;
font-size: 120%;
font-family:Arial,Helvetica,sans-serif;
}
#primary a:hover {
color: 666666;
background: #B8B8B8;
}
#primary a.active {
color: 666666;
background: #B8B8B8;
}
This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture. here is my css style sheet. A demonstration of the problem can be seen at: http://www.yourline-online.com/demo05/?How_to_create_pages Code: div.float {
float: left;
BORDER-RIGHT: #808080 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 2px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 20px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 2px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 2px solid;
HEIGHT: 200px;
WIDTH: 150px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
div.float p {
text-align: center;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}
MY HTML is like this: Code: H1>How to create pages</H1> <P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P> <P></P> <DIV class=container> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> <P>caption 1</P></DIV> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100> <P>caption 2</P></DIV> <DIV class=spacer> <DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100> <P>caption 3</P></DIV> <DIV class=spacer></DIV></DIV></DIV> I am creating a variation on the son of suckerfish drop down menu - I would post a link to that code but the forum wont allow me so please use google :-( Anyway the basic idea is to display a drop down with a series of links which are floated from left to right. I have tweaked the code and it works nicely in IE 8, FF 3 (os x and xp) and safari3 but I have a minor problem in IE 7 (I haven't dared look at IE 6 yet!) Basically the drop down is appearing too far off to the right in IE 7. I can fix it by using a conditional margin-left: -4.5em but this seems like a hack and i don't know how well it will work across different resolutions. If someone could give me some pointers on this I would appreciate it :-) You can see the code in action at www esuri-apartment.com/css_menu/index.html (apologies for the formatting but i'm blocked from posting urls which is a serious pain!) Many thanks! Toby Here is the code Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="menu.css" />
<script type="text/javascript" src="menu.js"></script>
<title>
Insert title here
</title>
</head>
<body>
<ul id="nav">
<li><a href="#">Menswear</a>
<ul>
<li><a href="#">Shirts</a></li>
<li><a href="#">Jackets</a></li>
<li><a href="#">Trousers</a></li>
<li><a href="#">Accesories</a></li>
<li><a href="#">Suits</a></li>
<li><a href="#">Shirts</a></li>
<li><a href="#">Jackets</a></li>
<li><a href="#">Trousers</a></li>
<li><a href="#">Accesories</a></li>
<li><a href="#">Suits</a></li>
<li><a href="#">Shirts</a></li>
<li><a href="#">Jackets</a></li>
<li><a href="#">Trousers</a></li>
<li><a href="#">Accesories</a></li>
<li><a href="#">Suits</a></li>
</ul>
</li>
</ul>
</body>
</html>
menu.css: Code: #nav, #nav ul {
padding: 0 20px;
margin: 0 0 1em;
list-style: none;
width:36em;
float:left;
font-size:1.1em;
}
#nav li {
float: left;
background-color:red;
text-align:center;
padding:0;
width:10em;
}
#nav li a {
display:block;
padding:0.25em 2em;
text-decoration:none;
width:6em;
}
#nav li ul {
position: absolute;
width: 40em;
height:10em;
left: -999em;
/* This appears to fix the problem in IE 7 but i dont like it
* margin-left: -4.53em; */
border:1px solid black;
padding-bottom:2em;
}
#nav li li {
background-color:white;
width: auto;
}
#nav li li a {
padding: 0.5em 0.5em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
#nav ul ul {
border: none;
float:left;
}
#nav li ul li ul {
height:1em;
width: 6em;
}
menu.js (hack for ie): Code: sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
I just thought I'd have a rant and see who agreed and disagrees with me. Please feel free to voice opinions on both sides. *RANT STARTS HERE* What the hell were they thinking when they decided on the box model. Sure, every element is in a box, I'm ok with that. But what's the go with how margin and padding styles are handled. Which moron decided that the size of the box would change depending on whether it had a border, a margin or padding? This one **** up in the standards has got to be the number one problem with using css for layouts. It flys in the face of common sense. i've got 800 pixels to work with, you'd think defining 2 boxes with width 400px or 50% would give you 2 boxes that would fit in the page, right? WRONG! Add a margin, padding or border to your box and they become too large to fit. This makes percentage width specifications become near useless and pixel specifications a pain in the *** to work out. If my boxes have anything specified in percentage then I've got no way to figure out how wide they are, I guess I'll make their width's 49% and hope for the best. If my boxes need to be 400 pixels wide but they have 5 pixels of padding and a 2 pixel border. Therefore they'll need to be 400 - 2 * 5 - 2 * 2 pixels wide. Does this appear to suck to anyone but me? Surely nesting all padding, border and margins inside the box would have been a far more sensible solution? Can anyone come with a reason for why they chose the current standard? Hi, I'm new so please be gentle! I'd really really appreciate any words of advice regarding the box model hack in IE6. I was under the impression that the box model is rendered correctly if the browser is operating in Standards mode. I have a very simple example where I have created two divisions. One with no hack and one with the hack. The code is as follows: Code: <?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
<title>Box Model Hack in IE 6</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
html>body .content {
width:400px;
}
div.content {
border:20px solid;
padding:30px;
background: #ffc;
width:300px;
}
div.contentHack {
border:20px solid;
padding:30px;
background: #ffc;
width:300px;
voice-family: "\"}\"";
voice-family:inherit;
width:400px;
}
</style>
</head>
<body>
<div class="content">Box model</div>
<div class="contentHack">With box model hack</div>
</body>
</html>
The example can be found at http://www.greeno76.com/validate/box.html In IE6. the boxes are different sizes (The hack one is larger). I would have expected them to be the same size. Can anyone explain this? Also, I have read that I need to remove the Code: <?xml version="1.0" encoding="iso-8859-1"?> statement otherwise IE remains in Quirks mode. I have done this on the following URL: http://www.greeno76.com/validate/boxNoUTF.html The boxes are still different sizes but are larger than the ones with the encoding statement. Can anyone help me with this? Have I missed something glaringly obvious? Any advice would be gratefully received. - Jason Situation Hi everyone. I'm trying to make an <img> hangover the right side of a <div> so half is inside and half outside. I'm applying a float with negative margins. Problem The problem is ie6 keeps cutting off the half that's suppose to be outside. Solution? Does anyone know how I can accomplish my situation in ie6? Also, I'm interested in learning the IE6 CSS Model. Can anyone point me to where I can learn exactly how it works? Thank you. Hi all, I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage: http://www.houseofhawkins.com/index.html which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text. They are links with the following CSS attached: div#Header #MenuSection a.MenuTab { PHP Code: filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0'); font-weight: bold; text-align: center; font-size: 1.3em; background-color: #BCD6BC; border-style: solid; border-width: 1px; border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5; margin: 0 5px 0 2px; height: 1.5em; width: 140px; padding: 5px 1px 1px 1px; } div#Header #MenuSection { float:left; margin-top: 30px; } here is the HTML code for that part of the page. PHP Code: <div ID="MenuSection"> <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a> <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a> <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a> <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a> <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a> </div> <div style="clear:left"> </div> I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work! I wish to understand why its like this... I have attached the CSS and the file if that helps anyone. Thanks for the help and advice. So I have been reading a lot about the inconsistencies I am noticing with the way that padding is handled in various browsers. Apparently the compliant handling is to add padding to the declared width or height. However, IE includes the padding in the declared width. The author of one article I read went so far as to say that he never mixes a declared width or height with padding or margins. He will have an outer div that sets the padding/margin, and an inner div with a set width. This is all well and good, but I am using css to format my anchor tags as a block element (in essence making a link that sort of looks like a button). And another undesired result of IE is that it did not treat a div inside an anchor tag as part of the anchor (you could not click on it). So is there anyway to work around the different treatments of padding to achieve a consistent result? Or is there a better approach than what I am trying to do? This is my current CSS which renders differently in IE than it does in Safari/Firefox: Code:
.whiteButton:link,.whiteButton:visited,.whiteButton:active{
display: block;
background-color:#FFFFFF;
width:110px;
color:#46C3D2;
font-weight:bolder;
padding: 4px 4px 4px 4px;
margin:3px 0px 2px 0px;
}
.whiteButton:hover{
background-color:#46C3D2;
color:#FFFFFF;
}
have the following declaration Code:
.small_header {
height: 28px;
width: 175px;
background: url(../images/blue_header.gif);
}
now if i add Code: padding: 7px 0px 0px 15px; i reduce the height by 7 and the width by 15 to compensate. This works fine in Firefox and IE6 but when testing it in IE5.5 it actually displays the division at the smaller size (it doesnt take into account the new padding). Why is this? I'm trying to make a box without table but i'm having some problems with the div's of the lateral columns. Look -> here I saw that if i want to use a percent value on height style in the div element, it's parent element must have the height element in pixels unit. But i don't want the height adjusted previously, the content in the box could do itself. thanks in advanced Code: body {
background:white;
margin:0px;
margin-top: 5px;
margin-left: 5px;
padding:0px;
text-align: center;
height: 100%;
}
#caixa{
width: 400px;
}
.esquerda_1{
float: left;
width: 38px;
height: 26px;
background:url(img/q1_1.gif) no-repeat top left;
margin:0px;
margin-right:-3px;
}
html>body .esquerda_1 {
margin-right:0px;
}
.direita_1{
float: right;
width: 38px;
height: 26px;
background:url(img/q1_3_semtitulo.gif) top right;
margin:0px;
margin-left:-3px;
}
html>body .direita_1 {
margin-left:0px;
}
.meio_titulo{
width: 100%;
height: 26px;
background:url(img/q1_2_shin.gif) repeat-x;
}
.esquerda_2{
float: left;
width: 4px;
height: 100%;
background:url(img/q2_1_shin.gif) repeat-y top left;
margin:0px;
margin-right:-3px;
}
html>body .esquerda_2 {
margin-right:0px;
}
.direita_2{
float: right;
width: 4px;
height: 100%;
background:url(img/q2_2_shin.gif) repeat-y top right;
margin:0px;
margin-left:-3px;
}
html>body .direita_2 {
margin-left:0px;
}
.meio{
width: 100%;
background:url(img/q2_bg.gif) repeat;
}
.esquerda_3{
float: left;
width: 6px;
background:url(img/q3_1.gif) no-repeat;
margin:0px;
margin-right:-3px;
}
html>body .esquerda_3 {
margin-right:0px;
}
.direita_3{
float: right;
width: 6px;
background:url(img/q3_3.gif) no-repeat;
margin:0px;
margin-left:-3px;
}
html>body .direita_3 {
margin-left:0px;
}
.meio_rodape{
width: 100%;
background:url(img/q3_2_shin.gif) repeat-x;
}
</style>
</head>
<body>
<br /><br />
<div id="caixa">
<div class="esquerda_1"> </div>
<div class="direita_1"> </div>
<div class="meio_titulo">aasdfsadfasd </div>
<div class="esquerda_2"> </div>
<div class="direita_2"> </div>
<div class="meio">
aasdfsadfasd aqui bla bla <br /> aqui bla bla<br /> bubu sdlkfjs dk<br /> alkakl WOWOWOW
</div>
<div class="esquerda_3"> </div><div class="direita_3"> </div><div class="meio_rodape"> </div>
</div>
I'm having a lot of difficulty understanding the box model when using css to make div tags act like table elements. I'm trying to get out of the habit of using tables for laying things out because I constantly hear the banter about that being a big no no. With that in mind I'd like a little help understanding how to accomplish what I want to do. In the past I would use something like the following: Code: <html> <head> <title>Test</title> </head> <body> <table border="1" width="100%" height="100%"> <tr> <td colspan="2"></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td colspan="2"></td> </tr> </table> </body> </html> That would give me a header and footer and two separate areas to play around with for the body content. I've tried to mimic that using the display:table and display:table-cell properties but I keep having quirky results due to my lack of extended understanding of how the box model operates. I tried laying out table-rows then nesting table-cells within (like how HTML tables work) and got this: Code: <html>
<head>
<title>Test</title>
<style type="text/css">
<!--
html {
min-height:100%;
height:100%;
}
body {
height:100%;
min-height:100%;
margin:0;
}
#container {
display:table;
position:relative;
width:755px;
height:100%;
min-height:100%;
margin:0 auto 0 auto;
border:1px solid black;
color:#000000;
padding:0;
background-color:#999999;
}
#headerrow {
display:table-row;
}
#bodyrow {
display:table-row;
}
#footerrow {
display:table-row;
bottom:0;
}
#headercell {
display:table-cell;
height:120px;
width:100%;
background-color:#dddddd;
border:1px solid red;
}
.bodycell {
display:table-cell;
padding:0;
text-align:center;
border:0;
vertical-align:middle;
border:1px solid green;
}
#footercell {
display:table-cell;
background-color:#dddddd;
margin:0;
padding:0;
width:100%;
height:26px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="container">
<div id="headerrow">
<div id="headercell"></div>
</div>
<div id="bodyrow">
<div class="bodycell">Something</div>
<div class="bodycell">Something</div>
</div>
<div id="footerrow">
<div id="footercell"></div>
</div>
</div>
</body>
</html>
Am I just going about it the wrong way and making things too complicated for myself? I've tried employing the use of table-columns but that got me nowhere because I'm not exactly sure how to apply it in the hierarchy. All I want to accomplish is having a similar layout to the html table example but with css div tags. I've been Googling and staring at code for too long again and hope that some fresh eyes (and a fresh mind) can talk me through this. Thanks in advance. I am trying to recreate part of a website that uses tables and images but with DIVs and CSS instead. I am having a problem with the box model and frankly its not making sense to me. Here is a how it is supposed to look: EDIT: sorry, can't get it to display properly in ASCII. Anyways one main div (blue backgroun). Inside it, another div (black background) so that it looks like a black box with a blue frame around it. No I can't use border for the black div either. The black div has another in it (float left) and on the right will be a flash object or some words or something. The height of the blue box is 521px, the blue box inside is 450px. I tried either padding and margin-top of 20px and instead of shifting the black box, it shifts the blue (container) box down and the black one stays in the same place. Here's some code snippets. I am not entirely concerned with the file in the include, it displays properly. It is simply a <UL> grouping. Code: <div id="content"> <div id="contentWrapper"> <div id="indexLeft"> <!--#include file="include/indexNav.asp"--> </div> Content </div> </div> Code: #content {
width:1001px;
height:521px;
margin-left:auto;
margin-right:auto;
border-left: 5px solid #365F97;
border-right: 5px solid #365F97;
background-color:#16365D;
}
#content #contentWrapper {
width:961px;
height:450px;
margin-top:20px;
margin-left:20px;
margin-right:20px;
background-color:#000000;
}
Why would margin-top on the wrapper move the parent div instead? K so... I feel ridiculous. I'm teaching a group on layouts with CSS... and I've run into an elementary question on my own. I'm just demonstrating the basics of the Box Model in all its glory, and here's my two pages: www.nickhand.net/boxmodel.html www.nickhand.net/boxmodel2.html The only difference in the two pages, is I added top-padding: 1px; to boxmodel2.html's styling. Why in the world would there be such a drastic difference when just setting a padding? If I make it 0, it goes back to the same as boxmodel.html, but if I make it padding: 1px;, it adds what I'm guessing is 11px to the top. What basic thing am I missing here? TIA! Savingstrangers I have this code Code: <html><head><meta http-equiv="pragma" content="nocACHE"><title>Script</title><h1>Hello</h1></head><body> <div style="float:left;border:1px red solid;width:200px;margin-right:10px;"><p>hello</p></div> <div style="float:left;border:1px blue solid;float:left;width:100%"><div style="float:left"><p>hello</p></div></div> </body></html> Basically the left div is for navigation which needs to remain the same width regardless of changing the browser window size. Th eright div is for main content and it can very in size. How do i put them next to each other because at the moment the right fall beneath the left, i have tried float:left in both but i have found a problem like this so sorry if its a simple one!! I have been having my share of problems with CSS lately for this one site I'm working on (this is my 3rd thread here about it) and now after researching I believe this one is from what I think is called a box model bug. The problem is this: The border heights for my <div>'s are perfect in FF but when I test in IE the are too long! below is my code and a url to the project. Code:
* {
margin: 0;
padding: 0;
}
body {
background-color:#FFFFFF;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}
#site {
width:775px;
height:500px;
margin:25px auto 0 auto;
border:none;
}
#container {
width:775px;
height:500px;
margin:0 auto 0 auto;
border:1px solid #99CCCC;
}
#header, img {
margin-top:10px;
border:none;
cursor: default;
}
#left {
width:210px;
height:201px;
margin-top:80px;
margin-left:20px;
border-top:1px solid #99CCCC;
border-right:1px solid #99CCCC;
border-left:1px solid #99CCCC;
float:left;
}
#menubar{
background-color:#FFFFFF;
text-align:left;
margin:0;
padding:0;
}
#menubar li {
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FF9933;
list-style:none;
text-decoration:none;
border-bottom:1px solid #99CCCC;
cursor:default;
line-height:27.5px;
}
#menubar a {
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FF9933;
list-style:none;
text-decoration:none;
cursor:default;
padding-left:5px;
line-height:27.8px;
}
#menubar a.active {
color:#99CCCC;
}
#menubar a:hover, #menubar a:focus,
#menubar a:active{
color: #FFFFFF;
background-color: #99CCCC;
}
#right {
width:520px;
height:390px;
margin:15px 0 15px 0;
border-top:1px solid #99CCCC;
border-left:1px solid #99CCCC;
float
http://jjs5327.aisites.com/IMD311/index.html Does anyone have some suggestions that will make my sites <div>'s look the same in both IE and FF? I built a custom Suckerfish CSS dropdown nav, with a portion of the code for which is below: Code:
#nav {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #67670f;
text-align: left;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li.navsep {
float: left;
width: 2px;
}
li.home {
float: left;
position: relative;
width: 61px;
}
li.home img {
border: 0;
}
li.ourproducts {
float: left;
position: relative;
width: 132px;
z-index: 500;
}
li.ourproducts img {
border: 0;
}
li.ourproducts ul {
display: none;
position: absolute;
top: 0;
left: 0;
width: 132px;
background-color: #fff;
}
li.ourproducts ul a, li.ourproducts ul a:visited {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 129px;
}
li.ourproducts ul a:hover {
display: block;
background-color: #e4e2db;
color: #67670f;
text-decoration: none;
}
The focus is on the li.ourproducts a, li.ourproducts a:visited declaration. In IE6, the background on :hover is 3 pixels shy of covering the whole list item. I know this must have something to do with the padding. FF however, renders it fine. I figured that IE6 would handle the box model fine. When I make the width 132px however for li.ourproducts a, li.ourproducts a:visited, in IE6 it's fine and in FF it's 3 pixels farther than it should be (135px). Can anyone hint at what the problem might be? I can't seem to get the declaration so both see it fine. -B Here's my page http://www.martcol.co.uk/Andy/ I can't get the image caption to line up in FF and IE6. I know it's something to do with the Box Model but if I get it in one, it goes out in the other.... Here's my CSS http://www.martcol.co.uk/Andy/main.css I imagine it's only a little tweak on this but I can't seem to get it. Thank Martin Code: div.somediv
{
width: 160px;
padding: 20px;
_width /**/: 200px;
}
no tantek hack, no holly hack, no external css imports, just a shame it doesnt validate! if you see the css filters page at my site (http://www.cyclomedia.co.uk) you'll see that the 200px rule is only read by ie5 and ie5.5. but i havent done extensive cross platform (mac) testing, but it works for me! Standards newbie here. I've used CSS plenty before, but always in combination with awful inelegant table madness. I'm trying to do right by the W3C this time. Except that the doctype declaration is out to kill me. I've written code that clearly isn't HTML 3.2 (as the current doctype declaration says), but if I bump up the doctype declaration to something standards-happy, like, say, 4, the document instantly goes haywire, and no amount of fiddling with my EditCSS plugin in Firefox will fix it. Except for the whole non-validating thing, this wouldn't be a problem, except that IE is having box-model problems. When I give my main div (#blogmain) the right width (837 px), IE stacks the two floated divs inside it, instead of putting them next to each other. You may notice the futile box model hack I tried to throw at it, but I guess that really doesn't work in IE 6.0. Please, someone, help me fix my doctype. Here's the style sheet, for you CSS wizards that don't even need to look at the thing to detect the problem: Code: <style type="text/css">
body { margin: 0; padding: 0; font-size: 75%; background-color: #2E3E4C; font-family: Verdana, Arial, Helvetica, sans serif; font-size: 1em; }
div { voice-family: "\"}\""; voice-family: inherit; }
* html #content { width: 839; w\idth: 837; }
#blogmain { position: absolute; left: 0; padding: 0; width: 837; background-color: #83776E; border: 1px solid #000000; }
#content { float: left; width: 678; background-color: #FFF}
#content h3 { margin: 0; font-size: .7em; text-align: center; }
#content h1 { margin: 0; }
#content h2 { margin: 10 5 5 10; }
div.entry { border: 1px solid #83776E; width: 658; margin: 10; }
.entry h1 { font-size: .9em; padding: 2px; border-bottom: 1px solid #83776E; background-color: #E0DDDB; }
.entry p { margin: 0; padding: 5; font-size: .7em; line-height: 1.5em; }
div.entrybottom { border-top: 1px solid #83776E; color: #FFF; background-color: #83776E; }
#sidebar { float: left; padding: 0; margin: 0; width: 159; background-color: #83776E; }
#entries { margin: 0; font-size: .6em; padding: 5; color: #FFF; }
#entries p { margin: 10; }
</style>
Here's the page again. And here's what it looks like with a 4.01 doctype declaration. (Also, bonus points for anyone who can tell me why Firefox adds an extra 1px line at the bottom my second .entrybottom div!) |
|||||||