473,837 Members | 1,727 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

div widths not correct in opera/firefox

5 New Member
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="davidpict urepages.css" />
<title>08.Hospi talAcrossTheStr eetFromUs.JPG</title>
</head>

<body >
<div id="row">
<div id="backthumbs " class="nav">
<A HREF="WalkAroun dTheNeighborhoo d.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.meme bot.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.Lookin gRightOutTheFro ntGateupright.h tml">
prev
</a>
</div>
<div id="next" class="nav">
<A HREF="09.TheEnd OfTheWorld.html " style="text-decoration:none ">
next
</a>
</div>

<div id="ImageName" >
08.HospitalAcro ssTheStreetFrom Us.JPG
</div>

<div id="LargeImage " class="nav">
<a href="./pics/08.HospitalAcro ssTheStreetFrom Us.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
  1. #row {
  2. vertical-align:middle;
  3. padding:5;
  4. width:100%;
  5. height:2.5em;
  6. }
  7.  
  8.  
  9.  
  10. #backthumbs {
  11. width: 20%;
  12. border-width: 2px;
  13. border-color: red;
  14. border-style: solid;
  15. vertical-align:middle;
  16. display:inline;
  17. margin:0;
  18. padding:0;
  19.  
  20. #title {
  21. width:60%;
  22. text-align:center;
  23. border-width: 2px;
  24. border-color: red;
  25. border-style: solid;
  26. vertical-align:middle;
  27. display:inline;
  28. margin:0;
  29. padding:0;
  30. }
  31.  
  32.  
  33. #backtohome {
  34. width: 20%;
  35. height:2.5em;
  36. vertical-align:middle;
  37. border-width: 2px;
  38. border-color: red;
  39. border-style: solid;
  40. display:inline;
  41. margin:0;
  42. padding:0;
  43. }
  44.  
  45. #prev , #next {
  46. width:10%;
  47. height:2.5em;
  48. vertical-align:middle;
  49. display:inline;
  50. margin:0;
  51. padding:0;
  52. border-width: 2px;
  53. border-color: red;
  54. border-style: solid;
  55. }
  56.  
  57. #ImageName {
  58. width:60%;
  59. text-align:center;
  60. vertical-align:middle;
  61. display:inline;
  62. padding:0;
  63. margin:0;
  64. border-width: 2px;
  65. border-color: red;
  66. border-style: solid;
  67. }
  68.  
  69.  
  70. #LargeImage {
  71. width: 20%;
  72. display:inline;
  73. padding:0;
  74. margin:0;
  75. border-width: 2px;
  76. border-color: red;
  77. border-style: solid;
  78. }
  79.  
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
11 9710
Banfa
9,065 Recognized Expert Moderator Expert
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.dt d">[/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
5 New Member
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 Recognized Expert Moderator Expert
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
5 New Member
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
1 New Member
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 Recognized Expert Expert
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
5 New Member
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
1 New Member
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 Recognized Expert Expert
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

Sign in to post your reply or Sign up for a free account.

Similar topics

3
6597
by: Lars G. Svensson | last post by:
As a regular ciwas reader, I learned that fixed-pixel designs are evil, so for the newly created site http://www.ddc-deutsch.de (in German, still very much under construction) I arranged the content (left) and the menu (right) (ideas stolen from bluerobot.com) using percentage widths (75% content, 25% menu). This looks nice in Opera 7.11 but in IE 6, content and menu are overlapping. When reading the following, please keep in mind, that...
7
1821
by: TheMartian | last post by:
Opera is driving me nuts, I am trying to get it to actually render a table the full width of the browser window sounds easy, but no, Opera and only Opera leaves a 16px margin on the right edge I know its a bug in Opera, but does anyone know of anyway round it? All other current browsers I tested render correctly, and yes that even includes that nasty IE thing
2
1884
by: Oliver Burnett-Hall | last post by:
I'm trying to move to using tableless page layouts, but I've come across what appears to be a bug in IE5's rendering that I can't find a way to overcome. The page has a sidebar to the left of the main content area. The main content are has several subsections, each of which starts with a mini-menu of four links. I want to have these laid out across the full width of the column. Here's an ASCII attempt to show the desired page layout:
3
10720
by: Steve Sabljak | last post by:
I seem to having a little trouble getting a table to display correctly in both msie and firefox. I want to set the table and column widths in pixels, and have some cell padding too. The table displays correctly in standards compiance mode in firefox, but not msie, where the padding is added on to the column widths. the table size is always correct, but the column widths are not what I expect them to be. If I change the column widths to...
1
992
by: MattB | last post by:
I've noticed that aspx pages I create look as I'd expect in IE but if I load them in Firefox the widths of elements like labels, text boxes, and tables don't come through correctly (at all?). Is there an established best way to correct this and maintain the look in IE too? Thanks! Matt
15
5413
by: Lennart | last post by:
Hi folks, I have created an animated image gallery in dhtml. It works fine in Internet Explorer. In Firefox, it only works if I ommit the DOCTYPE tag. The page is valid xhtml-strict but with a xhtml1-strict DOCTYPE, I get a dead script and dozens of error messages like "Error in parsing value in property 'width'. Declaration dropped." on Line 0. This page doesn't work in Firefox but is valid xhtml:...
7
1303
by: Dr J R Stockton | last post by:
I've heard that at <URL:http://www.merlyn.demon.co.uk/js-clndr.htm#P> and using Opera the suffixed dates in the yellow box appear in a single long line instead of in the obvious weekly manner. It's OK in IE 4 & 6. That sounds as if if (++k%7==0) document.writeln() is not working in Opera. Any explanation and/or suggestions? In particular, I'd like to know whether the circumstances will apply elsewhere on the site.
7
5020
by: aljamala | last post by:
Hi All, I am encountering this problem while doing some cross-browser testing. The table in IE looks fine, in Firefox it goes all the way to the edge of the screen and in Opera it is going off the screen (way too big). I have the table width set as 160% (I know its high, but I was playing around with it) Here is a sample page, it doesnt look as good as it should and I'm sorry for having to use geocities, but the table is there and you...
15
2024
by: dhtml | last post by:
Title says it. If I use a for in loop on an HTML collection, I get length twice. <!DOCTYPE HTML> <html lang="en"> <head> <title>length twice</title> </head> <body> <form action="javascript:;" id="form1">
0
10899
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10583
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10638
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9419
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7824
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7012
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5862
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4058
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3128
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.