|
CSS - Ie6 And Firefox Difference With Box Model (again!)
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 Similar TutorialsHello, I am trying to get my drop down boxes to line up properly and it is not working out for me in IE. Firefox looks alright, but I am having trouble getting it to line up in IE. Can someone please take a look at This Example and advise me on anything you see that is out of place. Thanks for the insight. webg I'm kind of clueless right now because for my CSS code, the gap between the header and the navigation bar is completely different for Firefox than IE. I designed it in IE (which was probably a mistake in hindsight) so that's the browser it appears fine in, but in Firefox the gap is about 2-5 pixels. I've looked at all the resources online, but still can't figure out how to fix the code, so if someone could edit the code below so it works I'd be greatly thankful. Cheers. CSS Extract: Code:
#wrapper, #content-wrapper {
float: left;
width: 100%;
}
#header {
height: 100px;
padding: 15px 0 5px 0;
background: url("http://talkpw.com/images/index_02.gif");
vertical-align: middle;
}
#navbar {
height: 28px;
border-bottom: 1px solid #ccc;
background: url("http://talkpw.com/images/index_08.gif");
}
.in {
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
vertical-align: middle;
}
.ina {
margin: 5px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 1;
vertical-align: bottom;
}
.navtext a:link,
.navtext a:visited,
.navtext a:active{
color: #FFFFFF;
text-decoration: none;
vertical-align: bottom;
}
.navtext a:hover{
color: #FF0000;
}
HTML: Code:
<div id="wrapper">
<div id="header">
<div valign="top" class="in">
<img src="http://www.talkpw.com/images/logonew.gif">
</div>
</div>
<div id="navbar">
<div class="ina"><span class="navtext"><font face="Tahoma" size="2" color="#FFFFFF"><a href="http://www.talkpw.com/index.php" style='text-decoration: none;'>Home</a> | <a href="http://www.talkpw.com/forums">Forums</a> | <a href="http://www.talkpw.com/videos.php">Videos</a> | <a href="http://www.talkpw.com/forums/index.php?autocom=arcade">Arcade</a> | <a href="http://www.talkpw.com/links.php">Links</a> | <a href="http://talkpw.com/forums/index.php?act=Reg&CODE=00">Register</a></font></span>
</div>
Can anyone help explain why my menu is displaying differently in FF and IE? I've done some research and tried a few hacks, I cannot figure this one out. http://www.departurestudios.com/playground/ Firefox Screenshot - http://www.departurestudios.com/playground/ff_screen.jpg IE Screenshot - http://www.departurestudios.com/playground/ie_screen.jpg My goal is to get it to look like it does in FF. Thanks. I have created a menu using css... but when i view it in ie it looks just about right.. but on firefox.. the width is just off... example IE: width is fine ------------------ --------- | | | | | | |______| but in firefox it just go all the way across the screen.. arg Code:
.navcontainer ul
{
margin-top: 0;
margin-left: 2;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px
}
.navcontainer {
margin: auto;
}
.navlist a {
width: 100%;
}
.navcontainer>.navlist a {
width: auto;
}
.navcontainer a
{
display: block;
padding: 1;
width: 165;
background-color: #003366;
border-bottom: 1px solid #eee;
}
.navcontainer a:link, .navlist a:visited
{
color: #EEE;
text-decoration: none;
}
.navcontainer a:hover
{
background-color: #369;
color: #fff;
}
i have attached the html file here.. cause i cant upload it. I created a CSS box where there's a header image & a css box under it, having 3 sides (no top border). It looks good in firefox, but can't get the box to close all the way (by meeting the header image) in explorer. There's a 2-3 px space there. li'l help please? Hello, I use the following css code to define the style of some tables. However in Firefox it shows it how i want it, but in IE it doesnt display the borders. (not around the rows of the table). Code: table.listings{
border-collapse: collapse;
border-style: none;
}
table.listings tr{
border-style: solid;
border-color: #4D3D4D;
border-width: 1px;
}
.darkRow td{
background-color: #4D3D4D;
color: white;
padding-left: 4px
}
.lightRow td{
background-color: #BFACBF;
color: #4D3D4D;
padding-left: 4px;
}
I create the tables something like this: Code: <table class="listings"> <tr class="darkRow"><td>bla</td></tr> <tr class="lightRow"><td>bla</td></tr> </table> Why does it display so much different in those 2 browsers? I've quickly created a small website for a friend of mine and it's the first time I've used <div> and <span> tags. It probably shows , because now it's a mixture of all kinds of layout methods. But anyway, it works fine in IE (what a lovely tolerant browser) but it messes up in Firefox. Have a look he www.duikeninegypte.nl The block text in the left column in the middel shows up fine in IE but is moved to the right in Firefox. Both pieces of text are defined in another file, so here it concerns the left part (_HOMEDUUR) and the middle part (_HOMEBODY). Why does it work in IE but not in Firefox? Cheers for any feedback! Gurt PHP Code: echo " <center><div id=\"backholder\" style=\"position: relative; height: 576px; width: 720px;\"> "; // background image echo " <IMG SRC=\"images/homeback.jpg\" style=\"position:absolute; left:0; top:0;\" border=\"0\" title=\"\"> "; //start navigation menu echo " <IMG SRC=\"images/nav-home-sel.gif\" style=\"position:absolute; left:5; top:10;\" border=\"0\" title=\"\"> "; echo " <a href=\"inhoud.php\"><IMG SRC=\"images/nav-inhoud-def.gif\" style=\"position:absolute; left:5; top:70;\" border=\"0\" title=\"\"></a> "; echo " <a href=\"bestel.php\"><IMG SRC=\"images/nav-bestel-def.gif\" style=\"position:absolute; left:5; top:130;\" border=\"0\" title=\"\"></a> "; // end navigation // left panel echo " <span style=\"position: absolute; left: 20; top: 190;\"> "; echo " <table width=\"200\" border=\"0\"><tr><td width=\"100%\"><font color=\"#ffffff\">"._HOMEDUUR."</font></td></tr></table> "; echo " </span> "; // body panel echo " <span style=\"position: absolute; left: 235px; top: 90px;\"> "; echo " <table width=\"480\" border=\"0\"><tr><td width=\"100%\">"._HOMEBODY."<br><br>"._HOMECREDITS."</td></tr></table> "; echo " </span> "; echo " </div></center> "; 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. 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? 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 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? 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? 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;
}
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 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 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'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 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 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? |
|||||||