Browser compatibility issue (Full Version)

All Forums >> [Web Development] >> General Web Development



Message

craigj1303 -> Browser compatibility issue (4/3/2008 10:32:41)

Hi All

This page is still in it's infancy design wise but I am stuck with a browser compatibility issue.

Please check the below address in IE6:

http://www.anyoldirons.me.uk

This is what I was trying to achieve with the navbar, header and content DIV's all sitting to the right of the side bar images.

If you check the same link in Firefox for some reason the 3 DIV's mentioned below appear half way down the page. I have tried several things by messing about with the floats and the clear: left / right etc. but I can't seem to get it right like it is in IE6.

I am sure it will turn out to be something simple!

Thanks in advance.

Craig



Tailslide -> RE: Browser compatibility issue (4/3/2008 10:41:23)

Fraid it's not just Firefox - it's everything but IE...

Rather than sorting that out - what exactly do you want those three images to do? They look like you've just got them there as background images? Is that all you need them for? If so then your best bet is just have one div (maybe called sidebar) and assign that image as a background-image. Float that left, stick all the rest of the right hand contents in a div and float that right - that'll sort it out for you.



Tailslide -> RE: Browser compatibility issue (4/3/2008 11:43:45)

Had a few minutes so - is this what you're after: TEST PAGE

tested in IE5.5 upwards, FF and Opera

(I reduced the width to fit on a 800px browser without scrollbar and I reduced the banner image width too). It's all there in the code. The background image could do with a bit of fancying up - it's not quite repeating correctly.



craigj1303 -> RE: Browser compatibility issue (4/3/2008 16:08:30)

quote:



(I reduced the width to fit on a 800px browser without scrollbar and I reduced the banner image width too). It's all there in the code. The background image could do with a bit of fancying up - it's not quite repeating correctly.

< Message edited by Tailslide -- 4/3/2008 12:59:33 >

_____________________________


Hi Tailslide

Looks like I was trying to do it the hard way. Yea, what you've done is pretty much what I was after. The only other thing I had in mind was having the background image visible about 50px at the top of the page gradually turning paler left to right as well as top to bottom, but I am sure I can sort something for that now that the alignment problem is sorted.

Out of interest, what did you use to come up with that background jpg? Was it photoshop using the gradient tool? What do I need to do to make the background repeat correctly?

Thanks,

Craig



Tailslide -> RE: Browser compatibility issue (4/4/2008 2:23:55)

I use photoshop elements.

Just for this example I did "Print Screen" to PE and then copied what you already had in your sidebar into a strip 65px wide by 790px long. Then just to neaten it up I stuck a grey gradient on the bottom so that the pattern would merge with the background colour of div.

I'd redo it if I were you to make it neater. Keep the strip fairly thin (I usually have it a lot thinner - under 20px wide) and make sure it repeats properly!

If you want the background image turning paler left to right as well as top to bottom then you're going to have an issue with the size of the background image as (for example) it might be 790px high by 760px wide - which is pretty big. I'd suggest if you can live with it only doing one or other - fade top to bottom then repeat the image horizontally or fade left to right and repeat vertically.




craigj1303 -> RE: Browser compatibility issue (4/5/2008 13:13:56)

Hi There

I had a go at tidying the background image which I think worked out pretty well. Now for the next browser compatibility problem!!

The bluey image of the clips in the top right is split in to 2 parts as the seperate pieces live inside different DIV's. I am trying to achieve the effect of them being joined together. I can achieve the desired effect in IE as you will see but again, not in Firefox. In Firefox there is a white space of about 6px under the top part of the image.

http://www.anyoldirons.me.uk/samfit.html

Any ideas?

Thanks & Rgs

Craig



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375