|
CSS - [ie6] Box Model
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. Similar TutorialsI 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 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 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? 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 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 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'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>
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>
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? 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;
}
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. 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!) 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! Okay, so, like, now I'm attempting to fix what I've got in IE (except IE on a Mac, that's a lost cause, I think, and demographically not something I need to worry about for this group) and I read up on the box model hack here http://www.communitymx.com/content/...0989953B6F20B41 (it explains all the hacks but promotes the Tan hack). I tried a hack in at least one place in the code, where I could handle the code (mathematically speaking), and it didn't effect any noticeable changes. My problem is that my head explodes when I try to figure out what to do when I have mixed units of measurement. Like, a width of 60% with padding of ems or pixels or something. The article didn't say what to do there, and frankly I need a calculator for basic math, so...what do you do in those cases? In their examples, they used consistent units of measurement. In IE, the content below the header is not really working, not the way it should or does in FF. For one thing, the .announcement box gets shoved to the bottom of the page, underneath #newsbox. http://www.describe.org/homework/esdcar/ http://www.describe.org/homework/esdcar/esdcar.css Also, why do the lines I used (dividing entries in #newsbox, for instance) change from skinny little lines to big fat wedges in IE? (And can I make it not do that?) I'm trying to get this div to center on teh page all teh way back to IE5. I'm using the box model, but I still can't get this thing to work. Any ideas on how to get it working? http://www.ira-soup.com http://www.browsercam.com/public.aspx?proj_id=296123 I have a website like shmah: Code:
<div class="wrapper">
<div id="leftframe"><img src="./intro.gif"></div>
<div id="content">
<div id="header"><?php include("header.php"); ?></div>
<div id="content"><?php include("content.php"); ?></div>
<div id="footer"><?php include("footer.php"); ?></div>
</div></div>
And the corresponding css like shmah: Code:
#wrapper {
text-align: center;
}
#content {
width: 700px;
margin: 0 auto;
}
#header {
width: 700px;
margin-bottom: 5px;
}
#content {
width: 700px;
min-height: 400px;
}
#footer {
width: 700px;
margin-bottom: 50px;
}
#leftframe {
position: absolute;
left: 50%;
margin-left: -600px;
}
table.table-in-the-content-area {
width: 100%;
border-collapse: collapse;
border: 0px;
border-spacing: 0px;
}
The issue is that the content div (the table contained therein) appears shoved off to the right in Firefox. When I set Firefox to use the border-box model, it centers correctly with the rest of the divs. IE and chrome don't have this problem. Any ideas where my weird margins may be coming from? Thanks! Damnit. Differing browser box models piss me off. I guess thats what you get for being a web developer, where someone can use 6+ different programs to run your code. I just started doing design with divs instead of tables and man what a PITA. I really like the idea of "building blocks" tho (and I really hate the inflexibility of tables), so I'm trying to grind through it. Its a small project, however, so I havent really been able to test cross-browser compatibility too much. I'm running into a strange error in IE (sidenote: the page does seem to be handled correctly in Opera (though Firefox jacks the page up totally)). Anyways, I have a series of nested divs (to emulate the structure of a table). Everything looks fine until I start messing around with divs with a display of 'none'. When I insert a div (or set a current div's) with display = 'none', part of the form input text will "flow over" outside of the div. In the pictured example, "Zachary Wedgeworth" is the last entry in the selectbox. There is no code / html after that selectbox, but as you can see, "Wedgeworth" appears after it! It isnt even able to be highlighted! The second line of the form contains a div with style='display:none'. If there's no div containing anything to do with display, this "overflow" error doesnt occur. There should be no difference in inserting a non-displayed div vs. never putting the div in the code at all, but (in IE at least), there is. stupid & frustrating. Has anyone run into this problem or have any idea why this might be occuring? Its already stumped a couple fellow programmers. |
|||||||