div widths not correct in opera/firefox

I am trying to create two rows, each 100% wide.
the first has three dvis, the first is 20% wide, the second is 60% wide, the third is 20% wide.
THe second row is the same except the first element is now two elements, each 10% wide.
sort of like so:

-----x---- ---------y1--------- -----z1---
x1 x2 ---------y2--------- -----z2---

what i am getting in operqa and mozilla is:

x y z
x1 x2 y z

i am using

div class= head
div class= row
div class= x width 20%
div class= y1 width 60%
div class= z1 width 20%

div class= head
div class= row
div class= x1 width 10%
div class= x2 width 10%
div class= y2 width 60%
div class= z2 width 10%

explorer makes the middle elements the right size, but opera and mozilla don't.

But the code is simple enough.

[HTML]
<html>
<head>
<link rel="stylesheet" type="text/css" href="davidpicturepages.css" />
<title>08.HospitalAcrossTheStreetFromUs.JPG</title>
</head>

<body >
<div id="row">
<div id="backthumbs" class="nav">
<A HREF="WalkAroundTheNeighborhood.html" style="text-decoration:none">
Back to Thumbnails
</a>
</div>

<div id="title">A Walk Through The Neighborhood
</div>

<div id="backtohome" class="nav" >
<A HREF="http://asllearner.memebot.com" style="text-decoration:none">
Back to David's Japan Home
</A>
</div>
</div>

<div id="row">
<div id="prev" class="nav" >
<A HREF="07.LookingRightOutTheFrontGateupright.html">
prev
</a>
</div>
<div id="next" class="nav">
<A HREF="09.TheEndOfTheWorld.html" style="text-decoration:none">
next
</a>
</div>

<div id="ImageName">
08.HospitalAcrossTheStreetFromUs.JPG
</div>

<div id="LargeImage" class="nav">
<a href="./pics/08.HospitalAcrossTheStreetFromUs.JPG" target="new">
Click here for a full size image
</a>
</div>
</div>
</div>

[/HTML]

my css is as follows

Expand|Select|Wrap|Line Numbers

 
#row {

vertical-align:middle;

padding:5;

width:100%;

height:2.5em;

}
 
#backthumbs {

width: 20%;

border-width: 2px;

border-color: red;

border-style: solid;

vertical-align:middle;

display:inline;

margin:0;

padding:0;

} 
 
#title {

width:60%;

text-align:center;

border-width: 2px;

border-color: red;

border-style: solid;

vertical-align:middle;

display:inline;

margin:0;

padding:0;

}
 
#backtohome {

width: 20%;

height:2.5em;

vertical-align:middle;

border-width: 2px;

border-color: red;

border-style: solid;

display:inline;

margin:0;

padding:0;

}
 
#prev , #next {

width:10%;

height:2.5em;

vertical-align:middle;

display:inline;

margin:0;

padding:0;

border-width: 2px;

border-color: red;

border-style: solid;

}
 
#ImageName {

width:60%;

text-align:center;

vertical-align:middle;

display:inline;

padding:0;

margin:0;

border-width: 2px;

border-color: red;

border-style: solid;

}
 
#LargeImage {

width: 20%;

display:inline;

padding:0;

margin:0;

border-width: 2px;

border-color: red;

border-style: solid;

}

I have tried playing with display many ways and nothing helps. If I put display block, then each element is put on a new line, I also tried inline-block. I tried display:table , table cell etc, and so on.

This shouldn:t be that difficult.

Jul 2 '06 #1

Follow Post Reply

9547

Banfa

9,065

Expert Mod 8TB

I suspect that you have designed in explorer and then you have checked to see if they work in mozillia etc.

The problem is that you have no DOCTYPE statement at the top of youR HTML, an example would be

[html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/html]

but all the common ones are listed at

http://www.w3.org/QA/2002/04/valid-dtd-list.html

use either an HTML 4.01 or XHTML 1.0 one.

The problem is that without a DOCTYPE all browsers work in quirks mode, with a DOCTYPE they work in standards mode. In standards mode the browser runs in a manor compilent with the specified standard (bugs not with standing).

However in quirks mode the browsers sometimes do some things that are not complient with the standards. Explorer is particularly bad for this and in quirks mode it has a broken box model, that is it interprets the width, padding size and border size incorrectly.

Add a DOCTYPE, you should see a change in the way explorer works, you may then need to change your CSS so that is displays correctly.

In general terms it is not a good idea to design to a pixel perfect design as it is hard to achieve on all browsers. It is also not a good idea to design to a 100% design because rounding errors can cause the design to go to >100% and then things start wrapping onto new lines that you don't wont. It is safer to design to just under 100% (that would be 99%) to avoid these problems.

Jul 3 '06 #2

asllearner

Thanks for the reply.
I started out previewing it in opera, actually, but couldn:t get it to work and switched to explorer.

but...

I tried every single doctype and none of them made any difference in how the document was presented. All worked fine in explorer and terribly in firefox. I think the problem is in my css or html...i changed the 60% to 40%, and that made no difference either, so it is not a question of running off the side, it's just not registering the width command...but I dont see why it isn:t.

thanks for the tips though.I will be sure to include doctypes from now on....

Jul 4 '06 #3

Banfa

9,065

Expert Mod 8TB

In that case post a link to the page (preferably) or post the html and CSS code and we'll see if we can see something you missed.

Jul 4 '06 #4

asllearner

Sure...I have posted it at http://asllearner.i.ph/tester/frame%...20working.html

the html and css are in my original post?!

Jul 4 '06 #5

jojeejoseph

I was wondering if asllearner resolved the issues he had with width and css classes on different browsers. I have a similar issue where after including the transitional doctype, <DIV> sections on the same page and with width: 99% are not aligned. I am using CSS classes and IE is the browser.

Nov 8 '06 #6

drhowarddrfine

7,435

Expert 4TB

You answered your own question. Never, ever use IE to design a web site. It is old, buggy and non-standards compliant. Always, always use a modern browser, such as Firefox or Opera or Safari or ANYTHING but IE. And IE7 is not much better.

Once you get it working in a modern browser, then you can adjust for IEs quirks and bugs.

Use a strict doctype. New pages should not be created with transitional. Then validate both your html and css to check for errors.

If you need help, post the link (preferably) or the complete code.

Nov 8 '06 #7

asllearner

I believe I ended up just using approximate percentages and going with it as it was, alas..sorry i cant help.

david

Nov 8 '06 #8

chap45

As with me, also having trouble between EI and FF. I am laying out a page or two for use intended for offline... I don't believe the DOCTYPE will have any effect. What can be done in a case like this. Maybe the above fellow is also offline.

Nov 13 '06 #9

drhowarddrfine

7,435

Expert 4TB

The doctype may be making ALL the difference. The doctype is the set of rules you are telling the browser you are using. No doctype and you let the browser set the rules which may not be the same as what you are following. Wrong doctype and you don't get what you want.

In particular, with no doctype or an improper one, IE will go into quirks mode and use a broken box model.

If you want help, we need a link, preferably, or the complete code.

Nov 13 '06 #10

letmeknow

it is better to create table and place the divs inside the table.We can specify the width of <td> and the divs cant exceed the width.

Oct 3 '07 #11

drhowarddrfine

7,435

Expert 4TB

Never, ever use tables for layout. It is unnecessary and stupid.

Oct 4 '07 #12

div widths not correct in opera/firefox

Post your reply

Similar topics