OK in IE6 - a mess in the rest...

N7AS · #1 Dec 24th, 2006, 03:28

For my first post here, I have a question about a layout I have been working on.

I'm using "Curvy Corners" to give the entire page rounded corners. It works great in IE6, but in all the rest (Firefox, Opera, IE7 and probably Safari) it's a mess. If someone could look at it and advise me what to do so it renders in the rest of the browsers it woud make my day.

My test page is located http://www.n7as.com/test-1.html

The main page content css is in the <head> section. I do link 2 other stylesheets, but they are for navigation and text styling only. The page validates fine for both CSS and XHTML 1.0 Strict.

Somrthing odd that I noticed is when I place my Google Adsense code on this page, it turns up in, I think, French. On all other pages on my site, the Google ads are ok. Wierd!

like5 · #2 Dec 24th, 2006, 04:07

Problems with your div layers. if use tables think it will work very well in FF

Ryan Fait · #3 Dec 24th, 2006, 04:16

Don't recommend tables! Those are horrible coding practices! Your CSS is really really messy, though. You have so many classes. Can you post a screenshot of what it looks like in IE? I'm on a Mac so I can't...

N7AS · #4 Dec 24th, 2006, 04:18

I hate to use tables unless there is absoutely no other way around it.

N7AS · #5 Dec 24th, 2006, 04:40

Quote:

Originally Posted by ryanfait

Don't recommend tables! Those are horrible coding practices! Your CSS is really really messy, though. You have so many classes. Can you post a screenshot of what it looks like in IE? I'm on a Mac so I can't...

Here is a screenshot of what it looks like in IE6...

N7AS · #6 Dec 24th, 2006, 04:54

I attached the wrong screenshot. Here is the correct one...

like5 · #7 Dec 24th, 2006, 05:10

true tables are no good but they work well with FF. Send me the html files with css i fix it for you

Ryan Fait · #8 Dec 24th, 2006, 06:03

If anything CSS works well in Firefox. IE is the trouble-maker. It's much easier to design a site in Firefox and then fix it for IE because FF renders CSS properly. There are so many quirks in IE, it's in your best bet to start off using a standards compliant browser.

Pheonix · #9 Dec 24th, 2006, 08:47

Only problem I see is the positioning for the main document is overlapping with your header image (light house.)
Your css has a lot of stuff in it tho, so I can't specifically find the problem

Dapandyman · #10 Dec 24th, 2006, 13:27

im using rounded css corners in my site and am having no problems - ill check yours out (although i am rubbish at css lol)

Dapandyman · #11 Dec 24th, 2006, 13:39

are you using js to do this?
my site uses solely css like this:
CSS:

Code: Select all

.curvy {position:relative;width:625px; height:320px; background:#222; color:#000; margin:5em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#222; background:#000;overflow:hidden;}
#ctl {top:0px; left:0px;}
#cbl {top:300px; left:0px;}
#ctr {top:0px; left:605px;}
#cbr {top:300px; left:605px;}
#quadtl, #quadtr, #quadbl, #quadbr {position:absolute; font-size:150px; font-family:arial; color:#222;line-height:40px;}
#quadtl {left:-8px;}
#quadtr {left:-25px;}
#quadbl {left:-8px; top:-17px;}
#quadbr {left:-25px; top:-17px;}

HTML:

Code: Select all

<div class="curvy">
<div id="ctl"><div id="quadtl">&bull;</div></div>
<div id="cbl"><div id="quadbl">&bull;</div></div>
<div id="ctr"><div id="quadtr">&bull;</div></div>
<div id="cbr"><div id="quadbr">&bull;</div></div>

(this goes just before the item with rounded corners)

you could use this as an alternative if you want
if you do, you need to change
.curvy {position:relative;width:625px; height:320px;
to the width and height of your text box or whatever you're rounding
and
#ctl {top:0px; left:0px;}
#cbl {top:300px; left:0px;}
#ctr {top:0px; left:605px;}
#cbr {top:300px; left:605px;}
take off 20 (the width of the corners) to put the corners in place
this is rather complicated and dumb - but it works in FF

do what you want, this is just a suggestion,
Good luck,
Dapandyman.

like5 · #12 Dec 24th, 2006, 17:54

You fix it looks ok to me in FF

N7AS · #13 Dec 24th, 2006, 18:21

Quote:

Originally Posted by like5

You fix it looks ok to me in FF

It was an easy fix. JUst changed the height in the header from 45px to 100%.

It still needs some tweaking in IE 5.1 and IE5.5 though, but I may leave it alone as everybody should be using at least IE6 by now. I did notice in Safari that in my large header <h1> I use a <span> to change the color of the .com part to a shade of gray. Safari does not handle this properly and must look like a line break to it. I use browsershots.org to check layout in other browsers.

moojoo · #14 Dec 27th, 2006, 15:40

Never an excuse for tables. heh

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
ie6 utter mess&ie7 mess. safari&opera&firefox alright	thosecars82	Web Page Design	2	May 21st, 2008 11:02
Converting phpbb template to rest of site	jonbcheshire	Starting Out	6	Jul 10th, 2007 11:17
Finsh The Rest...	JacobHaug	Webforumz Cafe	48	Dec 8th, 2006 10:53
css mess!	onlinegamesplayer	Web Page Design	9	Jun 8th, 2006 15:37

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
OK in IE6 - a mess in the rest...