|
| |
|
|
craigj1303
Posts: 29
Joined: 5/16/2007
Status: offline
 |
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
Posts: 6003
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 6003
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
< Message edited by Tailslide -- 4/3/2008 12:59:33 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
craigj1303
Posts: 29
Joined: 5/16/2007
Status: offline
|
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
Posts: 6003
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
craigj1303
Posts: 29
Joined: 5/16/2007
Status: offline
|
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
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
