Runboard.com
Слава Україні!
Runboard Extra Chat Room Support Search Facebook

Runboard.com       Sign up learn about it | Sign in lost password?

Page:  1  2 

 
Joshin Josh Profile
Live feed
Blog
Friends
Miscellaneous info

 


Registered: 11-2004
Posts: 665
Karma: 18 (+20/-2)
Reply Quote
Check out your layout in different browsers


I was just seeing how a test board of mine looks like in different browsers, and well It looks somewhat differently on 4 of them, I can fix some of the problems with the skin to make it look the same, but I just decided to make this topic to show everyone why it is always good to check out your layout in different browsers.

I made my layout in Firefox, and naturally it looks the best in firefox.

Image
Click image for Full Screen shot

Now with Internet Explorer7 it looks by far the worst.
Image
Click image for Full Screen shot

It looks okay with Opera, I would just need to block texts in my h2 class defined in my css rather than using font-size:0;. Opera is after all probably the second best browser next to firefox emoticon
Image
Click image for Full Screen shot

Now with Safari for windows, Again doesn't look too bad, but I dislike how it changes the font size/weight on classes I have already defined.

Image
Click image for Full Screen shot




---

7/27/2007, 6:04 pm Link to post PM Joshin Josh Blog
 
Redsun9 Profile
Live feed
Blog
Friends
Miscellaneous info

 


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 Profile
Live feed
Blog
Friends
Miscellaneous info

 

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? emoticon emoticon

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.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
7/28/2007, 2:09 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Redsun9 Profile
Live feed
Blog
Friends
Miscellaneous info

 


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... emoticon
7/28/2007, 7:40 am Link to post Email Redsun9   PM Redsun9 ICQ
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

 

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) Image for some people when all you need is a <td valign="top"> to make it look like this (click on thumbnail) Image? Of course, the choice is yours. emoticon

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


---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
7/28/2007, 6:26 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Redsun9 Profile
Live feed
Blog
Friends
Miscellaneous info

 


Registered: 05-2006
Location: World
Posts: 59
Karma: 1 (+1/-0)
Reply Quote
Re: Check out your layout in different browsers


what can i add more to your post dear lesigner girl? emoticon With our members want we changed our layout after one year and quickly i did stg with html to build siderbar,etc.of course i'm not that good in html codes as it seems only IE7 covers my half false codes so i like it much emoticon

Other browsers are quite much sensetive about the codes.By the way thanks for your guide, i changed some of my mistakes and now its %90 ok in firefox also.But its hard to change for me every error which validator shows,gonna get such a long time,so IE7 and Firefox is standart and enough for me now emoticon

About red back ground color thing, yes there is one.I don't exactly know but there is.And all my member (except Firefox) can see it i asked them.

Here is the pic of the red background color:

Image

Anyway thanks again for your advices...
7/29/2007, 8:20 am Link to post Email Redsun9   PM Redsun9 ICQ
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

 

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. emoticon

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. emoticon

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.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
7/29/2007, 2:58 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Joshin Josh Profile
Live feed
Blog
Friends
Miscellaneous info

 


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 Profile
Live feed
Blog
Friends
Miscellaneous info

 


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?

---

Advertise Boards On TRDConceptsDE
7/30/2007, 4:43 am Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

 

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. emoticon I thought space didn't matter after commas, but I could be mistaken on that one.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
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)