9 replies [Last post]
green2004
Offline
newbie
Last seen: 16 years 34 weeks ago
Joined: 2004-08-25
Posts: 5
Points: 0

Hi,

I have two pages designed using CSS (without tables),

http//www.ngrain.com/CSS/home1.htm designed for IE

and

http//www.ngrain.com/CSS/home2.htm designed for NN, Mozilla, FireFox and Opera.

The page home2.htm looks fine on Windows in NN, Mozilla, FireFox and Opera, but look messed up on Red Hat Linux in NN, Firefox and Opera.

Is it because these browsers behave differently on different platform or something is wrong with my CSS?

Not to mention, the home1.htm page on Mac in IE is little messed up too.

Feel free to comment on CSS & HTML code and not on the visual design.

Do NOT use the links on these pages because only these two pages are created using CSS for test purpose only. Rest of the site uses tables.

Thanks in advance.

green2004

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 21 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

CSS: Comment please…

Hi green2004,
Looks like the links go to the same address?

green2004
Offline
newbie
Last seen: 16 years 34 weeks ago
Joined: 2004-08-25
Posts: 5
Points: 0

CSS: Comment please…

Yes I noticed it and I have fixed the error in my original post.

green2004

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 weeks 2 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

CSS: Comment please…

Bloody heck, that site's yummy!

(Sorry, couldn't resist).

One problem - in Mozzy FF 0.9, Windows 98 SE, I get a horizontal scrollbar.

Verschwindende wrote:
  • CSS doesn't make pies

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 21 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

CSS: Comment please…

Hi green2004,
Great looking site.

Are you going to keep two pages or are you looking at bringing them together?

green2004
Offline
newbie
Last seen: 16 years 34 weeks ago
Joined: 2004-08-25
Posts: 5
Points: 0

CSS: Comment please…

Hi Tony,

Eventually I will use only one htm page. I don’t have browser detection code in place and that’s why I created two htm pages. Well I am little surprised with the reaction that you guys like the site, because I saw the site on Linux in NN, Firefox and Konquorer and the design looks messed up. On Mac in IE too Home1.htm page looks little messed up. Although the same pages on windows in IE, NN, Opera, Firefox and Mozilla looks fine.

Can you guys take a look at my code and tell me if I am not doing something right? Does the page looks messed up on Linux because these browsers behave differently on different operating systems.

Thanks in advance for your comments and time.

green2004

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 21 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

CSS: Comment please…

Hi green2004,
We were commenting on the design or look of the site not the problems in specific browsers.

You shouldn't need to use browser detection or two pages Smile

Start by developing the page so that it works well in firefox and then make whatever changes are needed to get it working in IE.

Working with one page from the start will simplify the whole process and make maintenance much easier.

Hope that helps

green2004
Offline
newbie
Last seen: 16 years 34 weeks ago
Joined: 2004-08-25
Posts: 5
Points: 0

CSS: Comment please…

Thanks for your comments but it’s not helping me get on the right track and find the mistakes that I am making. I went through the source code of other sites designed without tables. I have started from scratch. Now I am designing the page for other browser first than IE. As I am designing, I am checking the page on Windows and Linux in NN, Opera, Mozilla and Firefox. Here is my new simple page http//www.ngrain.com/css/new1.htm that I created. On Linux I see a wider gap between the textbox and navigation on Linux than on Windows.

I am also using absolute positioning now to have better control. I am going through a lot of articles but it will help me if you go through my code and show me what is the correct way. That way I will know exactly where and what is the mistake. Right now all I know is that something is wrong but I am trying to shoot in dark hoping I will find the target.

Thanks again

green2004

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 21 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

CSS: Comment please…

Hi green2004,
Let me start by saying you are doing a great job, the site looks good.
Then let me say I'm a little hung over so I am not going to go through your code and fix what I can't see as broken Cool
One thing you should try to come to grips with is that the web unlike print media is not an exact media.
Don't expect to get the page looking exactly the same in all browsers and devices and at all the different resolutions. Sorry but that's just not going to happen no matter how much hair you pull out.
Lastly let me tell you I'm bald Laughing out loud

Now that the philosophy lesson is over I will try to give some more advice that will help in the long run.
It's a good idea to start the css file with html, body{margin:0; padding:0;} as many browsers give differing default margin and padding to the body.

Then start by specifying things like fonts in the body which will then be inherited by most of the other tags so wont need re-specifying unless you need to make a change.
That will cut down the size of your css file significantly.
Then you could look at other things that seem to be repeated and see if there is a way to remove them.
for example say you want all the links on the page to not be underlined. You could set a{text-decoration:none;}
Then even for the links with class or id you don't need to re-specify text-decoration unless you want to change it.

This may not be the answer you were after but I hope it helps just the same.

green2004
Offline
newbie
Last seen: 16 years 34 weeks ago
Joined: 2004-08-25
Posts: 5
Points: 0

CSS: Comment please…

Thanks Tony. I will remember your advice.