Forum Home
Press F1
 
Thread ID: 60637 2005-08-08 05:52:00 Problem rendering CSS code Brian (1043) Press F1
Post ID Timestamp Content User
379361 2005-08-08 05:52:00 Hi there!

I was wondering if someone could offer me some advice. I have the following code wghich renders perfectly in IE, but in the other browsers (Netscape, Firefox, Opera) it gets all screwed up :annoyed:. Here is the code:


<HTML>
<HEAD>
<!doctype html public "-//w3c//dtd html 3.2//en">

<div id="headbanner">
<img style="position:absolute; height:150px; width:500px; top:25px; right=100px; z-index: 1"; src="Headbanner.jpg">
<img style="position:absolute; height:25px; width:25px; top:35px; right=559px; z-index: 3"; src="bigw.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=537px; z-index: 3"; src="bigo.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=515px; z-index: 3"; src="bigr.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=493px; z-index: 3"; src="bigd.gif">
<img style="position:absolute; height:20px; width:20px; top:40px; right=468px; z-index: 3"; src="bigo.gif">
<img style="position:absolute; height:20px; width:20px; top:40px; right=446px; z-index: 3"; src="bigf.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=421px; z-index: 3"; src="bigl.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=399px; z-index: 3"; src="bigo.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=377px; z-index: 3"; src="bigv.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=355px; z-index: 3"; src="bige.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=330px; z-index: 3"; src="bigc.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=308px; z-index: 3"; src="bigy.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=286px; z-index: 3"; src="bigb.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=264px; z-index: 3"; src="bige.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=242px; z-index: 3"; src="bigr.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=220px; z-index: 3"; src="bigc.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=198px; z-index: 3"; src="bigh.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=176px; z-index: 3"; src="bigu.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=154px; z-index: 3"; src="bigr.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=132px; z-index: 3"; src="bigc.gif">
<img style="position:absolute; height:25px; width:25px; top:35px; right=110px; z-index: 3"; src="bigh.gif">
</STYLE>

</HTML>


I was wondering if someone could offer me some pointers as to modify this code so that it renders correctly in all browsers.

TIA for any help and advice! :thumbs:

Brian 		Brian (1043)
379362 2005-08-08 08:37:00 Doesn't display properly in IE 7
do you have a live page to view? 		bartsdadhomer (80)
379363 2005-08-08 10:56:00 Why don't you define it in its own .css file? vapo (5203)
379364 2005-08-09 09:24:00 Hi Bartsdadhomer!

I have uploaded the page here: www.god-zone.org.nz

You can have a lok at the way it renders...I looked for IE 7 but all I could find was a beta version...it renders okay in IE6 SP2...but all the other browsers, as I have stated, screw it up...perhaps I'll have to try linking to an external style sheet...but even then I am concerned that the rendering might get screwed!

Any ideas?

Thanx,
Brian 		Brian (1043)
379365 2005-08-09 10:00:00 you cant use right as a way to set the location.

as per the CSS way of the world everything has to be set from the left. 		robsonde (120)
379366 2005-08-09 13:05:00 Why not make the whole banner an animated gif? vapo (5203)
379367 2005-08-09 13:44:00 Why not make the whole banner an animated gif?
Yeah, I agree with vapo, thats quite overkill for a 'simple' banner.

@rob: nope, you can use right, left, top or bottom. 		sal (67)
379368 2005-08-09 15:43:00 www.silvertech.co.nz

Is this what you are after, I will let you muck around with the final layout, too many numbers for me. 		Rob99 (151)
379369 2005-08-10 06:54:00 www.silvertech.co.nz

Is this what you are after, I will let you muck around with the final layout, too many numbers for me.

That is excatly what I am after....I tried it in the different browsers and it worked perfectly in all of them...Thanx Robb99! I had a look at your source and see the changes are extremely subtle...but it works!

I know the numbers are a bit much...sal and vapo suggested creating the whole thing as an animated gif...perhaps they can point me to a site that will show me how to do it...

Thanx for all the help...it's really appreciated :) 		Brian (1043)
379370 2005-08-10 08:24:00 Do you have Adobe Photoshop? Rob99 (151)
1 2