box model which is works fine always in IE but not in FF and NS

**ithinkcss** · 07-30-2006, 06:19 PM

hi all

i have a box model which is works fine always in IE but not in FF and NS (not always)

sometimes needs refresh to work...otherwise the last div takes the properties of the second last div.... and i dont know what is happening

i forgot to mension that if i have 50 boxes only 1-2 have this problem...and always random....of course when i hit f5 everything works fine

<DIV class=boxnav><a href="prod_sub.asp?id=<%=RSevent("CategoryID") %>">
<DIV id=iconidio_big style="background-image: url(../media/boxnav/<%=RSevent("icon_file") %>);"><IMG src="../media/boxnav/<%=RSevent("icon_file") %>" border=0></DIV>
<DIV><%=RSevent("name") %></DIV><div id=learn>learn more...</div></a></DIV>

/*---css boxes-----*/
div.boxnav {
z-index:1;
margin: 0pt;
font: 11px Tahoma, Arial, sans-serif;
white-space: nowrap;
height: 140px;
width: 18em;
float:left;
position:relative;
display:block;
border-right: #ccc 1px solid;
border-bottom: #ccc 1px solid;
}
div.boxnav div {
margin-left: 8px;
float:left;
width: 16em;
}

div.boxnav a {
text-decoration: none;
color: #999;
font-weight: bold;
display: block;
width: 100%;
height: 100%;
position:absolute;
cursor: hand;
}
div.boxnav a:hover { background-color: #f4f4f4; color: #000066;}

div.boxnav #iconidio {
margin-top: 50px;
width: 16em;
height: 50px;
background-position: left -50;
background-repeat: no-repeat;
cursor: hand;
}
div.boxnav #iconidio_big {
margin-top: 20px;
width: 16em;
height: 80px;
background-position: left -80;
background-repeat: no-repeat;
cursor: hand;
}
div.boxnav a:hover #iconidio, div.boxnav a:hover #iconidio_big {background-position: left 0;}
div.boxnav #iconidio img, div.boxnav #iconidio_big img {display: none;}

div.boxnav #learn {
padding-left: 10px;
font: 10px Tahoma, Arial, sans-serif;
color: #FF9900;
text-decoration: none;
background-image: url(imgs/boxarrow.gif);
background-repeat: no-repeat;
background-position: 0 5;
}
div.boxnav a:hover #learn {color: red;}
/*---end css boxes-----*/

**ithinkcss** · 07-30-2006, 06:22 PM

one more thing that you must know is that...this problem occures only when the site is online...locally i don't have those issues

**ray326** · 07-30-2006, 10:14 PM

Full doctype?

**drhowarddrfine** · 07-30-2006, 11:26 PM

Box Model 'Problems' are related to IE since it is the reason such problems exist. If FF and NS are not display your box as you wish, then you must have designed using IE, which is the browser with "Box Model Problems". (See my "But it works in IE!" link below). Showing us the CSS will not allow us to help you so we need the complete code or, preferably, a link.

**ithinkcss** · 07-31-2006, 02:17 AM

drhowarddrfine

here's the test link, the problem occurs only in NS & FF but not always (usually before reload) :

http://www.2ymorrow.gr/en/prod_main.asp

ray my doctype is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

i didnt had any problems with that doctype in the past

thanks for your reply

**ithinkcss** · 07-31-2006, 02:18 AM

please ignore the left menu...i have fixed that

**drhowarddrfine** · 07-31-2006, 08:22 AM

Your doctype is incomplete and IE is in quirks mode. Fix it with this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

You will never get IE to display like modern browsers, such as Firefox, while in quirks mode.

Why are you using transitional/loose/sloppy doctype? All new pages should always use a strict doctype.

In addition, you have 277 html errors and way too many css errors.

**ithinkcss** · 07-31-2006, 08:32 AM

sorry drhowarddrfine
this is not fix my problem and adds me more

maybe this is the right way but i dont have time to remake all the css

see yourself:
http://www.2ymorrow.gr/gr/prod_main.asp & http://www.2ymorrow.gr/en/prod_main.asp

plus since the website is dynamic i dont have 227 errors because the 220 refers in the way that i define the items...which i cannot understand what is the wrong with that

**drhowarddrfine** · 07-31-2006, 12:05 PM

Well, your errors are what the browser sees and some browsers will ignore that code and everything after it. And, like I said, with IE in quirks mode you will never get IE to perform correctly or any other browser to perform the same.

**ithinkcss** · 07-31-2006, 12:14 PM

my friend drhowarddrfine

im sure that you are right...but if you spend 3minutes to see the pages and locate the actual problem maybe you will understand that is more simplier than you talk about.... i cant change all of my css right now....

plus i dont have prob with IE, i dont have problem to the layout either....something is bother the ns and ff (to a very specific point) and i cann't understand what is this ( as i already wrote, not always...after the reload everything is ok)

thanks again for the post

**ithinkcss** · 07-31-2006, 12:16 PM

Well, your errors are what the browser sees and some browsers will ignore that code and everything after it.

if something like that happen i should take wrong ALL the boxes, EVERYTIME
ps.sorry for my eng, i dont know if you completly understand me

**felgall** · 07-31-2006, 03:11 PM

The first step in fixing problems with the way a web page displays differently in different web browsers is to fix the HTML errors making sure that the page has a valid doctype.

The second step is to fix the CSS errors.

Only with valid HTML and CSS is there even a possibility of getting the page to display the way you want across more than one browser.

If you want web pages to work then take the time to create web pages and not just throw something together and hope that browsers can read your mind as to what you meant.

Thread: box model which is works fine always in IE but not in FF and NS

Thread Tools

Display

box model which is works fine always in IE but not in FF and NS

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions