|
|
Posted by Jonathan N. Little on 05/18/06 18:10
Knut Krueger wrote:
> Hi to all,
> first, I would like to thank you for all help in the
> ... table tread ...
> Ok tables are very old fashioned style, I will promise not to abuse them
> further more ;-) .. in new pages ...
>
>
> Therefore I tried out some features of the CSS style, but there are,
> some more questions, which I didn't not find in the manual:
>
> http://test.konstanze-krueger.de/index.html
>
> It is working absolute fine with IE but not with Netscape or Firefox
> pls. see link below
>
> The middle image is not fitting with Netscape and Firefox.
> Seems that Netscape and Firefox are not stretching the original image
> (its 20 px width)
>
> Is there any other solution or anything wrong.
1) Avoid quirks mode and your result will more likely be more constant
among browsers , so use *strict* doctype.
2) Avoid *absolute* positioning whenever possible, there is usually a
way (many times simpler) without and your document will be more flexible.
Try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>More Flexible Layout</title>
<style type="text/css">
#banner { margin: 30px 0 0 5px; border: 0; padding: 0; color: #fff;
background-color: #00a000; height: 100px; }
#banner IMG { border: 0; display: block; }
#banner #logoRight { float: right; }
#banner #logoLeft { float: left; }
</style>
</head>
<body>
<div id="banner">
<img id="logoRight" src="clipart/bar2_right.jpg" width="180"
height="100" alt="------">
<img id="logoLeft" src="clipart/bar2_left.jpg" width="330" height="100"
alt="------">
</div>
</body></html>
Food for thought: I would get rid of image for text on left and use
plain text, just a plain sans-serif font anyway and would be readable
for text and aural browsing!
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|