Page: 1 2
Redsun9
Registered: 05-2006
Location: World
Posts: 59
Karma: 1 (+1/-0)
|
Reply Quote
|
|
Re: Check out your layout in different browsers
Good subject josh.
This is the topic i'm trying to explain my members.
Best view for our board is IE7.I build it in IE7 and in all firefox browsers (1.5-2) it seems terrible.Firefox doesn't show some html codes of my layout correctly.And some of my colors (there are red background color in login-password boxes normally but in firefox it seems gray) aren't ok.
So i put an explanation below my sidebar part like "best viewed in IE7".
It's hard to make them standart i think :|
|
7/27/2007, 8:27 pm
|
Link to post
Email Redsun9
PM Redsun9
ICQ
|
Lesigner Girl
Head of Runboard staff
Registered: 11-2005
Posts: 1895
Karma: 83 (+86/-3)
|
Reply Quote
|
|
Re: Check out your layout in different browsers
Egads! You're telling people to use IE?
I just checked your CSS, Redsun, and I didn't see where you have your login box backgrounds defined. I didn't log out of Firefox to see how they look there, but they're white in IE6, Opera, and Netscape.
Speaking of Opera, your layout is really screwed up in that browser. Instead of being on the side, your sidebar is above the rest of your board. Looking at the source code, I see that your first <TR> is missing the <td> after it, and that missing <td> is causing the problem. On a side note, <tr> should be in lower-case.
Excellent topic, Josh, and excellent screen grabs. Even a lot of professionals don't seem to check their work in more than one browser, which can lead to some major problems in the layout.
You weren't kidding about Safari for Windows. It looks like that browser really sucks.
|
7/28/2007, 2:09 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Redsun9
Registered: 05-2006
Location: World
Posts: 59
Karma: 1 (+1/-0)
|
Reply Quote
|
|
Why IE7?
the red color background is i mean in cls parts login box(username-password-etc) which becomes invisible and turn to miscoption links when a member login to board.It's color is exactly the same with my seperator color normally, but in Firefox it seems without color.
Also firefox doesn't like my </div> s, which i used for e-mail adresses to put them below my blogwriters windows at the sidebar.Mail icons near to writers banners in firefox but normally they're under of it in IE7.
Another thing normally there is a space between my jumpbox and searchfind thing in IE7.But in firefox they seems stick eachother...
So seems you surprised for that but i have to tell my members to build IE7 and come to our board for best wiev.About Opera and Safari, believe me noone using them in Turkey may be some comp.eng.s...
|
7/28/2007, 7:40 am
|
Link to post
Email Redsun9
PM Redsun9
ICQ
|
Lesigner Girl
Head of Runboard staff
Registered: 11-2005
Posts: 1895
Karma: 83 (+86/-3)
|
Reply Quote
|
|
Re: Check out your layout in different browsers
No, I'm not surprised that you tell people to use IE because your board doesn't look right in any other browser, because people do that all the time. But unfortunately, people also like to blame Firefox when a good layout goes bad, even though Firefox is doing exactly what you tell it to do with your bad code. In other words, it's not Firefox's fault that things don't look right on your board, it's the fault of the person who added the code.
quote: the red color background is i mean in cls parts login box(username-password-etc) which becomes invisible and turn to miscoption links when a member login to board.It's color is exactly the same with my seperator color normally, but in Firefox it seems without color.
I know, which is why I checked it in all the browsers I wasn't logged into, and the boxes were white in IE6, NS, and Opera. Since you already say they're white in Firefox, I didn't see the need to log out to view it in Firefox and see that they are the same color as they are in all three of my other browsers.
I don't understand why they look red to you in IE, since they look white in my IE, and you don't have the background color on them defined in your CSS that I can see.
quote: Also firefox doesn't like my </div> s
Firefox loves </div>s, but only when they are closing <div>s.
Why are you trying to close <div>s that don't exist? Firefox doesn't like what you did because the code is wrong, just like Opera screws up your layout with the missing <td> (which is still missing, as well as another missing <tr> I hadn't noticed before). If you want a line break before an envelope icon, just use <br /> there. Don't try to close a <div> that doesn't exist.
quote: Mail icons near to writers banners in firefox but normally they're under of it in IE7.
This is why you should design in Firefox (or another browser that is also web standards compliant) and then check in IE (which is NOT web standards compliant). Firefox and a few other browsers all translate code correctly, but IE makes up a lot of its own rules.
I just noticed also that many of your <img> tags are wrong. For example:
<img alt="Bulus,ma 2007" src="http://qurl.com/f8lqh="230" height="150">
<img src="http://qurl.com/gqhbc="230" height="115">
This makes it look like "230 is part of the image url, so wouldn't be surprised if some browsers read it as a nonexistant image.
quote: Another thing normally there is a space between my jumpbox and searchfind thing in IE7.But in firefox they seems stick eachother...
form { margin: 1em 0; }
Also, you are missing form tags around your jumpbox form.
quote: So seems you surprised for that but i have to tell my members to build IE7 and come to our board for best wiev.About Opera and Safari, believe me noone using them in Turkey may be some comp.eng.s...
Would you rather fix the code you know is wrong and make it look good for everyone who visits? Or would you rather ignore the bad code and let your board look like this (click on thumbnail) for some people when all you need is a <td valign="top"> to make it look like this (click on thumbnail) ? Of course, the choice is yours.
You should run your board through this html validator, because it will point out a lot of mistakes in your code so you will know what needs to be fixed. While you're at it, this site is good for checking your CSS.
All I'm saying is please don't blame Firefox when it's bad code that is messing up your layout. If you fix the problems I pointed out, it will fix the problems you mentioned.
Last edited by Lesigner Girl, 7/28/2007, 6:44 pm
|
7/28/2007, 6:26 pm
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Lesigner Girl
Head of Runboard staff
Registered: 11-2005
Posts: 1895
Karma: 83 (+86/-3)
|
Reply Quote
|
|
Re: Check out your layout in different browsers
You're very welcome, Redsun.
Sorry about the background thing. I thought you meant the login and password boxes themselves, not the whole miscoptbar box that surrounds them. But yes, now I see the difference.
You have the correct CSS in your remotely hosted style sheet to make the red background and black border, but the line directly above that is causing it not to work:
#fl_td_1_2 br, #fl_td_2_2 br, #fl_td_3_2 br, #fl_td_4_2 br, #fl_td_5_2 br, #fl_td_6_2 br, #fl_td_7_2 br, #fl_td_8_2 br, #fl_td_9_2 br, #fl_td_10_2 br, #fl_td_11_2 br, #fl_td_12_2 br, #fl_td_13_2 br, #fl_td_14_2 br, #fl_td_15_2 br, #fl_td_16_2 br, #fl_td_17_2 br, #fl_td_18_2 br,#fl_td_19_2 br,#fl_td_20_2 br{ display: none; }
display:block; margin-top: -7,5px; }
.ak_miscoptbar_table{border:2px solid #000000;background-color:#aa0000;width:710px;padding: 4px 4px 4px 4px;}
As you can see by the part in green, you've already closed off the definitions for all those #fl_td's, leaving the part in white all by itself to do nothing but cause errors. If you get rid of the part in white, then the part after it will work, and you will have the red background in all browsers.
You're right that browsers other than IE are sensitive about the codes. That's because they translate code very literally, to make sure they display pages as you define them.
You're welcome for the guide, and I see you fixed the placement of the envelope. I went ahead and added the missing <tr> and <td align="top"> into your HTML so the overall layout is fixed in Opera, and fixed a few more errors that I previously mentioned while I was there.
|
7/29/2007, 2:58 pm
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Joshin Josh
Registered: 11-2004
Posts: 665
Karma: 18 (+20/-2)
|
Reply Quote
|
|
Re: Check out your layout in different browsers
You also have an error in the code Lesigner posted, that some browsers may not read right..
#fl_td_18_2 br,#fl_td_19_2 br,#fl_td_20_2 br
You need to put a space in between the coma's and the #'s, so it should be:
#fl_td_18_2 br, #fl_td_19_2 br, #fl_td_20_2 br
|
7/30/2007, 4:09 am
|
Link to post
PM Joshin Josh
Blog
|
Pastor Rick
Registered: 07-2005
Location: Texas
Posts: 395
Karma: 51 (+55/-4)
|
Reply Quote
|
|
Re: Check out your layout in different browsers
So space really is the final frontier?
|
7/30/2007, 4:43 am
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Lesigner Girl
Head of Runboard staff
Registered: 11-2005
Posts: 1895
Karma: 83 (+86/-3)
|
Reply Quote
|
|
Re: Check out your layout in different browsers
If that's true, Josh, then I've been doing something wrong. I thought space didn't matter after commas, but I could be mistaken on that one.
|
7/31/2007, 12:58 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Reply
Page: 1 2
You are not logged in ( login)
|