5 replies [Last post]
Vishal
Offline
newbie
Last seen: 12 years 26 weeks ago
Timezone: GMT-4
Joined: 2006-06-17
Posts: 9
Points: 0

I am hoping someone will be able to tell me where am I making the mistake.

Below code works fine on Firefox, however does not work on Opera. It seems like width issue, but I am still not getting it.

CSS Code

Quote:
.premier {
background-image : url(../images/bg001.gif);
background-position : bottom;
background-repeat : no-repeat;
width : 645px;
height : 125px;
float : left;
border-width : 1px; /*above image has curve ending bg with 1px width border, as image is not there, this might give the idea about the error I am referring to*/
border-style : solid; /* replacement for above image*/
}
.title {
float : left;
text-align : left;
width : 475px;
padding : 5px 10px 5px 10px;
line-height : 12px;
font-size : 12px;
background-color : #D0E3F0;
font-weight : bold;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #00008B;
}
.phone {
float : left;
text-align : right;
text-decoration : underline;
width : 150px;
padding : 5px 0px 5px 0px;
line-height : 12px;
font-size : 12px;
background-color : #D0E3F0;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.description {
float : left;
width : 490px;
text-align : justify;
padding : 10px 5px 5px 10px;
font-size : 12px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.image {
float : left;
width : 120px;
text-align : right;
padding : 10px 10px;
}

HTML Code

Quote:

<div class='premier'>
<div class='title'>Company Name Goes Here</div>
<div class='phone'>1-800-123-4567</div>
<br>
<div class='description'>Test description content here, it can be anything about the product or services offered by user. Test description content here, it can be anything about the product or services offered by user. Test description content here, it can be anything about the product or services offered by user.</div>

<div class='image'><img border="0" src="images/120x60.jpg" width="120" height="60"></div>

</div>


If you use the above code, you will notice that in Firefox it is working properly, however in IE & Opera there is a blank space on right hand side. Any idea on how do I fix the code so it would work with all IE, Opera & Firefox too?

Thank you for the help.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Css Width Issue on IE &amp; Firefox

Any chance of a link to the page?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Vishal
Offline
newbie
Last seen: 12 years 26 weeks ago
Timezone: GMT-4
Joined: 2006-06-17
Posts: 9
Points: 0

Css Width Issue on IE &amp; Firefox

Here is the testing url

http://www.softwaredevil.com/test/css2/page9.html

View it in IE & then in Firefox. You will notice that it works alright in Firefox but not in IE or even opera.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Css Width Issue on IE &amp; Firefox

You've got no doctype (which the forum rules state you need on your page before asking for help) - IE is using the broken box model.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Css Width Issue on IE &amp; Firefox

Also, Opera in quirks mode models itself on IE5. So you've got a double whammy if not in standards. If Firefox renders ok, a complete and proper DTD should likely fix Opera.

… two different display modes have been added in Opera 7.0: Standards Mode (with IE known as Standards-compliance Mode) and Quirks Mode (essentially an Internet Explorer compatible mode). (emphasis added)

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Vishal
Offline
newbie
Last seen: 12 years 26 weeks ago
Timezone: GMT-4
Joined: 2006-06-17
Posts: 9
Points: 0

Css Width Issue on IE &amp; Firefox

Oh my gosh..

sorry friends...

What a silly mistake.. I put the doctype and the problem is fixed.

P.S.. I updated the page and now it works well on all browsers..

Thanks a lot for helping me.. (forgot that test pages needs 'doctype' too).