homepage Welcome to WebmasterWorld Guest from 54.204.79.235
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS/HTML Rendering in IE VS Firefox / Opera
How do I program the CSS to look the same in Opera and Firefox and IE?
ProductivePC




msg:1203129
 4:50 am on Oct 14, 2004 (gmt 0)

I have been trying to figure out what is wrong with my CSS or how I can fix the problem I have run into. I am very new to CSS. To the left of my page I am using a BR tag to move a text link below an image. In IE, the text link is directly below the image to the point where when you move over it the colored background goes behind the image. However in Firefox and Opera the text link is directly above bottom of the box this link and image is enclosed in. I cannot use a margin fix because then in opera and firefox it will move the link outside of the box but in IE if I don't it looks really stupid sitting that close to the image.

The best thing I can do is give you the code and see if you can help....

Thanks Ahead of time. I have tried making everything into its own span tag, div tag, I have tried to format the br tag, I have tried everything I can possibly think of... does anyone know how to fix this problem?

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Page Title</title>
<style type="text/css" media="screen">
body {
background: #eee; color:#000;
margin: 0px 0px 0px 0px;
padding:0;
font: x-small/1.75em Verdana,Arial,Tahoma,Sans-serif;
}

a {
color:#09c; font-size:11px; font-weight:600;
text-decoration:none;
}

a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}

#doglink {
position:relative;
top:0px; left:0px;
font-size:9pt;
margin:0px 0px 0px 0px;
}

#dlb {
display:block;
float:left;
background: #f00; /* red */
margin:0px 0px 0px 0px;
width:160px;
border:1px
border-top: 0px solid #dddddd;
border-right: 1px inset #000;
border-bottom: 1px inset #000;
border-left: 1px solid #bbbbbb;
height:568px;
padding:0px;
text-align:center;
}

#dlbg {
background: #ffc;
float:left;
width:140px;
height:100px;
padding:0px;
margin:5px 0px 5px 0px;
border:1px;
border-style: dashed;
position:relative;
top: 4px; left: 9px;
}

#image {
margin:0px 0px 0px 0px;
position:relative;
top:6px; left:0px;
padding:0px;
border:1px;
border-style:solid;
}

#text {
position:absolute;
top:30%; left:40%;
display:block;
background: #cfc; /* green */
}
</style>

</head>
<body>

<div id="dlb">
<span id="dlbg"><a id="doglink" href=""><img alt="" id="image" src="image.jpg"><br>Puppies</a></span>
<span id="dlbg"><a id="doglink" href=""><img alt="" id="image" src="image.jpg"><br>Belgian Malinois</a></span>
</div>
<div id="text">Display All Text Here & Other Images Here</div>
</body></html>

[edited by: SuzyUK at 2:31 pm (utc) on Oct. 14, 2004]
[edit reason] excess code removed and existing examplified [/edit]

 

gohankid77




msg:1203130
 5:03 am on Oct 14, 2004 (gmt 0)

A couple of things to note before someone gets started.

When using XHTML:
1) make sure all of your elements and attributes are lowercase.
2) make sure that all tags are closed. For example, in HTML, you could have <img src="image.jpg" alt="image">. In XHTML, it must be <img src="image.jpg" alt="image" />. One exception is the <p> tag. It must use <p> and </p>.

Markup validation [validator.w3.org] helps a lot!
So does CSS validation [jigsaw.w3.org]!

ProductivePC




msg:1203131
 5:27 am on Oct 14, 2004 (gmt 0)

Thank you for the advice. I am a little new to xhtml as well. Okay I did this however it did not help the rendering any. Now, I have: (CSS is still the same)


<div id="header" />
<ul />
<li /><a title="About Us" href="" /><span />About Us</span /></a /></li />
<li /><a title="Client Testimonials" href="" /><span />Clients</span /></a /></li />
<li /><a title="Contact Us" href="" /><span />Contact Us</span /></a /></li />
etc....

<div id="dlb" />
<span id="dlbg" /><a id="doglink" href="" /><img alt="" id="image" src="image.jpg" /><br />Puppies</a /></span />
<span id="dlbg" /><a id="doglink" href="" /><img alt="" id="image" src="image.jpg" /><br />Belgian Malinois</a /></span />
etc....

<div id="text" />Display All Text Here & Other Images Here</div />
</body />
</html />

[edited by: SuzyUK at 2:36 pm (utc) on Oct. 14, 2004]
[edit reason] removed excess code [/edit]

gohankid77




msg:1203132
 5:31 am on Oct 14, 2004 (gmt 0)

Whoa! No, no. LOL

You don't need the "/" on EVERY element. Just on elements defined as "empty" such as <br />, <hr />, <img />, and <area />. <div>, <span>, <html>, <body>, etc. just to be closed normally (i.e. </div>, </span>, </html>...)

example:
<div id="header">
<ul>
<li><a title="About Us" href=""><span>About Us</span></a></li>
<li><a title="Client Testimonials" href=""><span>Clients</span></a></li>
</ul>
</div>

<div id="dlb">
<span id="dlbg"><a id="doglink" href=""><img alt="" id="image" src="image.jpg" /><br />Puppies</a></span>
<span id="dlbg"><a id="doglink" href=""><img alt="" id="image" src="image.jpg" /><br />Belgian Malinois</a></span>
</div>

<div id="text">Display All Text Here & Other Images Here</div>
</body></html>

Modified for your learning pleasure. :)

[edited by: SuzyUK at 2:40 pm (utc) on Oct. 14, 2004]
[edit reason] removed excess code [/edit]

ProductivePC




msg:1203133
 5:58 am on Oct 14, 2004 (gmt 0)

I am looking at it.... Is there anything different in that code other than the closing of the tags? I closed out the tags but it still renders differntly in firefox and opera than it does IE. I have tried using to position:relative rules, one for the image and one for the text link... the only thing that happens is it makes the text link disappear. So the next thing that I tried was to remove one of the hyperlink tags and make them both one....

I believe that the problem lyes in the rendering of HTML with the two other browsers vs IE. It is rendering the br tag differently..... I cannot take the br tag out because then the text link and the image will be on the same line. Is there a way to get the text link down to the next line and control the exact spacing from the image without using a br tag?

SuzyUK




msg:1203134
 4:12 pm on Oct 14, 2004 (gmt 0)

ProductivePC,

The Validators that gohankid77 pointed you to in msg#2 are a good source of finding actual coding/nesting errors and I think if you run your CSS through the CSS Text Validator you will see there are some errors (specifically the border on dlb).

The main thing that might be causing problems in the More compliant browsers (FF and Opera ;)) is that you are using multiple occurences of ID. An ID should only be used once per page to IDentify an area. If you want o reuse a style (classify) an element, you should use Classes.


<span
id="dlbg"><a id="doglink" href=""><img alt="" id="image" src="image.jpg">Link</a></span>
<span
id="dlbg"><a id="doglink" href=""><img alt="" id="image" src="image.jpg">Link2</a></span>

Should be

<span
class="dlbg"><a class="doglink" href=""><img alt="" class="image" src="image.jpg">Puppies</a></span>
<span
class="dlbg"><a class="doglink" href=""><img alt="" class="image" src="image.jpg">Belgian Malinois</a></span>

Then in the CSS instead of e.g.
#dlbg it should be .dlbg

Back to your question!
I don't quite seem to be able to see what you're getting at? should we be seeing a large gap between the image and the text links in FF and Opera?.. If so I'm not..

Is there a way to get the text link down to the next line and control the exact spacing from the image without using a br tag?

Yes. set the image to display: block;, making it a block level element so it displays on its own line.. then give it a bottom margin which spaces it from anything that comes after it, and remove the <br />

but I think that your use of <spans> may also be confusing things.. these are inline elements by default, however floating them does (or should) make them into a block element.. Your relative positioning is not doing anything that I can see, except that nowhere in your HTML or CSS are the image dimensions given, so it could be using a default line-height (causing the text to dissappear behind them?)

I think you need to look into the difference between Block and Inline Elements <span>, <a> and <image> are inline elements by default.. and in effect I think what you are trying to do would be better done with "blocks".. I think anyway..

<div id="dlb">[containing block no.1]
<span class="dlbg"> [containing block no.2]
<a class="doglink"> [containing block no.3]
<image> [ inside block 1]
<inline text> [ inside block 2]
</a>
</span>
<div>

if anything what you're possibly seeing is FF and Opera are being "correct" while IE is being forgiving about that <a> "block" it should be inline according to your code (thus only as high as the line-height of the text) but IE is being generous and allowing the image to stretch the height therefore highlighting the image background too?

This is a lot of supposing, becasue I can't actually see the problem but if you can narrow a smaller test case, please post new code and we'll see if we can nail the actual cause for you

Suzy

ProductivePC




msg:1203135
 7:18 am on Oct 15, 2004 (gmt 0)

Thank you two for your answers. I have been doing a lot of reading. I took both of your suggestions on top of a lot more reading on the W3 website and got something semi-working. The text is lined up now. I needed a position:static instead of a position:relative in there for the image and I also added a div tag within the text link in order to get it to center out. Whether or not this is properly written, I do not know.... I am not quite up to the point of understanding the difference between inline and other sorts. I am getting there :)

Anyway, the problem that I am having is the effect I am going after. When a user rolls their mouse over the image to the left I want the text link to light up. According to what I have, this should happen. It was happening until I put the div tag in. In IE you still see the text link light up when your mouse rolls over the images... In NN, Opera, and FF you do not. I believe I can probably hack around this with a a.doglink:hover and light it up as someone rolls over the image however but I shouldn't have to since I have it set to highlight all links. Any Suggestions? Did I screw something up with the way that I wrote it?

New CSS
html, body {margin: 0; padding: 0;}

a {
color:#09c;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}

#dlb {
float:left;
background: #DAE0D2 url("bg-right.gif") repeat-y;
margin: 0px 0px 0px 0px;
display:block;
width:160px;
border:1px
border-top: 0px solid #dddddd;
border-right: 1px inset #000;
border-bottom: 1px inset #000;
border-left: 1px solid #bbbbbb;
height:568px;
padding:0px 0px 0px 0px;
}

.dlbg {
background-image:url('image.gif');
background-repeat: repeat-x;
float:left;
width:140px;
height:100px;
padding:0px 0px 0px 0px;
margin:5px 0px 5px 0px;
border:1px;
border-style: dashed;
position:relative;
top: 4px;
left: 9px;
}
.image {
position:static;
margin:4px 0px 0px 28px;
border:1px;
border-style:solid;
display:block;
}
.doglink {
font-weight:bold;
font-family: verdana,tahoma,arial,sans-serif;
text-decoration:none;
font-size:9pt;
}
.centerlink {
text-align:center;
}

New HTML

<div id="dlb">
<span class="dlbg"><a class="doglink" href=""><img alt="*" class="image" src="image.jpg" /><div class="centerlink">Puppies</div></a></span>
<span class="dlbg"><a class="doglink" href=""><img alt="*" class="image" src="image.jpg" /><div class="centerlink">Belgian Malinois</div></a></span>
</div>

[edited by: SuzyUK at 9:00 am (utc) on Oct. 15, 2004]
[edit reason] removed excess code [/edit]

ProductivePC




msg:1203136
 8:24 am on Oct 15, 2004 (gmt 0)

Well,

I pinpointed what was causing my problem with the rollover. The new DIV tag "<div class="centerlink">German Shepherds</div>" that I put in there to be able to center the text for the text link.

I cannot use a <span> tag because it will not recognize the text-align:center;
I cannot use another anchor tag for the same reason.
I cannot use a paragraph tag because it will not highlight.
I cannot use an header tag because I get some really funky results...

Is there a tag I can use that will allow the highlight to work and still allow my text-align:center; to work in opera, FF, and NN?

Thanks for any insight.

SuzyUK




msg:1203137
 9:27 am on Oct 15, 2004 (gmt 0)

ProductivePC.. I'm on it! stay calm.. LOL..


#dlb {
display:block;
float:left;
background: #ccc; /* grey */
margin: 0;
padding:0px;
width:160px;
border-top: 0px solid #dddddd;
border-right: 1px inset #000;
border-bottom: 1px inset #000;
border-left: 1px solid #bbbbbb;
height:568px;
text-align:center; /* IE Center */
}

.dlbg {
display: block;
background: #ffc;
width:140px;
/*height:100px;*/ /* removing this stops text overlap and keeps bottom padding intact */
padding: 5px 0;
margin: 5px auto; /* compliant browser center */
border: 1px dashed #000;
text-align: center; /* IE Center for image */
}

.dlbg a {
font-size: 9pt;
font-weight: 600;
background: #0f0;
}

.dlbg a:hover {background: #eee;}

.dlbg a img {
display: block;
margin: 0px auto 3px auto; /* center the image but it must have a width - see below */
border: 1px solid #000;
width: 80px;
height: 71px;
}

</style>

</head>
<body>

<div id="dlb">
<div class="dlbg">
<a href=""><img alt="" src="image.jpg" width="40px" height="40px">Puppies</a>
</div>

<div class="dlbg">
<a href=""><img alt="" src="image.jpg" width="40px" height="40px">Puppies</a>
</div>

Ok Firstly change the span tags to div tags (they can keep the same class name) this will make the "dlbg" element a block element by default (A box if you like)

Then you don't actually need any other classes within those boxes because you can target the <a> and the <image> by using their parents class name ("dlbg"). e.g
.dlbg a img {} - targets an image whose parent is an <a> element whose parent is an element with a classname of "dlbg"

You need the widths on the images somewhere in order to be able to center them properly (as I've seen the page I know the images are all the same size so that makes it much easier, if they weren't then yes you could use different class names on the images to target different sizes or you could just put the widths and heights in the HTML, but I digress)

You just need to float your left column with it's width at 160px it will contain your 140px wide boxes (dlbg) no problem just use auto left and right margins to center them (text-align: center for IE)

The "dlbg" box itself is the block element that holds the image and text, padding on this box gives you space, inside the box, above the image and below the text link. Margin on this is what spaces the box itself from the top of the page and the next box below it. I removed the height restriction from it which will allow the box to stretch if neccesary (i.e. larger resolution viewing) and also it allows the padding to remain intact suggesting an "even" appearance. As long as the images remain the same height and there is only one line of text the height will still be what you want it to be!

Then inside that box (Block element) you then need to make the image into a block element too which will keep it in it's own little box/seperate line too, centering it the same way margin: 0px auto 3px auto; the auto margins will calculate themselves from the width of the image, this is why it needs a width. The bottom margin of 3px can be adjusted to suit but it's this that spaces the image the line of text beneath it!

You already found out you couldn't nest a <div> inside a <span> that is just the rules of HTML.. you can't nest a block element e.g <p> inside an inline element e.g. <a> either ;)

Yes inline elements don't (or shouldn't! IE quirks does I think) accept widths or heights

Finally note that your way of specifying a border is not
correct: the border shorthand properties are explained Msg#38 Border Shorthand Properties [webmasterworld.com]

Hope that helps
Suzy

ProductivePC




msg:1203138
 10:38 am on Oct 15, 2004 (gmt 0)

WOW! And Double WOW on your article. I have read a lot of stuff on the Internet about CSS but nothing made more sense than that article you wrote. Nothing I have read ever explained why they called it cascading style sheets or even comes close to explaining half of the things you explain in those posts. Thank You.

One last question for you....

Where do I find out what elements are block and which are inline. do you know of a website that has them all listed without having to surf every unknown command on the W3 website?

Thank You for all of your help.

P.S. I had to laugh when I read your comment about IE shattering your CSS Illusions... If that isn't the truth. lol

ProductivePC




msg:1203139
 11:33 am on Oct 16, 2004 (gmt 0)

Thanks Again. I did a lot of studying on what you wrote and am trying to find some good resources on which elements are what type of elements. I think that is where my main issues lye. I don't know what are blocks and what are inline despite any of the websites that I have seen giving tutorials on CSS2. Thank you so much for your help. Everything works like it was intended to. Have a wonderful day.

SuzyUK




msg:1203140
 2:13 pm on Oct 16, 2004 (gmt 0)

You're Welcome ;)

About the list of what elements are what, I have an offline guide I used to use, and can't even remember where I picked up the info from now!

however I found this Sample Stylesheet [w3.org] which is not exactly the list you're after becuase it shows the recommended defaults (padding/margin etc) that the browsers use.. so it's a guide in that respect and not strictly adhered to as far as padding/margins go.

Anyhow in the absence of a list I could link to I thought it made a compact list that might help you for a start.

Those elements, listed at the top are all block level by default.. e.g.

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block }

for the other elements it either lists a special display-type [w3.org] e.g. inline-block, which is usually "block" with other special features but consult the link for more info on these display types..

and then if there's no display type for an element listed or the element is not in that list it is an Inline element

e.g.
i, cite, em,
var, address { font-style: italic }

The above are all inline elements..
<span> is not mentioned in the list at all because all it's various defaults are zero and it is an inline element.

In general inline elements should just be used to format text content which is already inside a block level element

e.g.
<p>This paragragh is the block level element with some <i>inline italics added</i> then the block element continues</p>

<p> is the block element/box which contains some inline formatting

<span> is a generic inline element which can be used to create your own inline formatting.

Generally: A block level element always starts a new line in your web browser

I recommend getting yourself a good HTML Book, as a "always keep on the desk" book, while all the information can be found online as you say it's all over the place and you mightn't know where to look in the beginning! My HTML "bible" (SAMS Teach Yourself Web Publishing with HTML and XHTML) is old and decrepit looking, but still never far from my hand

Suzy

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved