Browser Standards Problem

[BillyBoB]

Hello all. I am working on a website trying to get it to look as close to the same on each browser as possible.

 

The website I am working with is: http://syckgamingleague.com/Home/

 

This page does validate in w3.org but the navigation in Opera is messed up and a lot is messing up in IE.

 

The IE problems could be caused because the doctype is xhtml but considering IE doesn't recognize application/xhtml+xml it is being sent to IE as text/html. I will include 3 screenshots one for each of the browsers mentioned.

 

Polkamon is a codename not final name.

 

[attachment deleted by admin]

[TheFilmGod]

I think the problem is caused by your use of "vertical-align: middle;".

 

This is incorrect. To vertically align text (for the navigation) you should use

 

font: 12px/16px .... ;

 

=

 

font: FONT_SIZE / TOTAL VERTICAL height

 

Therefore, in my first example, the text is 12px and it would be centered for a 16px vertical height block.

 

Hope that works!

[BillyBoB]

It isn't text please actually look at the site before you post. Your font style wouldn't work.

[haku]

How would the guy have been able to even know about your use of v-align without having looked at your page - you didn't mention it in your post. So he obviously did look at your page, and maybe just got the wrong answer.

 

With a response like that, I hope no one helps you. Talk about rude.

[BillyBoB]

Talking about rude come into my post and post stupid post like that.... and obviously I was talking about in detail anybody with correct knowledge of html would know that that couldn't be a web safe font and would have to be in an image.

 

#mainNavigation {
display: inline;
height: 41px;
width: 754px;
margin-right: 8px;
vertical-align: middle;
text-align: right;
}

 

That is the css that controls it. Vertical-align is a css style and will work just not on Opera. Vertical-align must be in an inline code. Considering <div> isn't inline it must be set to display as inline as posted above. Please don't go around talking about what you do not know and this isn't php you can test locally so do it.

[haku]

Heh, FilmGod - this guy is trying to say you don't have any HTML knowledge. Must be a newbie.

[TheFilmGod]

... anybody with correct knowledge of html would know that that couldn't be a web safe font and would have to be in an image.

 

Even if I was mistaken, I WAS trying to help. Your disrespect to me has just shown how immature and unappreciative you are over someone's help.

 

Please don't go around talking about what you do not know and this isn't php you can test locally so do it.

 

Locally test it? Are you kidding! Why would I waste time testing your website. You aren't paying me. To top things off, you have a loud mouth and do not appreciate the little charity someone gives you.

 

That is the css that controls it. Vertical-align is a css style and will work just not on Opera. Vertical-align must be in an inline code. Considering <div> isn't inline it must be set to display as inline as posted above.

 

Opera is one of the best browsers out there. Right after firefox, of course. And there is a reason why Opera doesn't support "vertical-align." Such things should not exist, but unfortunately they do. Vertical-align was a css property recommended by the W3C in CSS1, and much has changed during that time. For instance, many smart designers have switched to CSS and dropped the use of tables, with tabular data as the only exception.

 

so what am I saying. Well look at this code:

 

#subNavigation {
display: table-cell;
width: 754px;
height: 37px;
background: url('http://syckgamingleague.com/images/MainBG.jpg') repeat-y;
padding-left: 8px;
text-align: left;
vertical-align: middle;
}

 

You use "display: table-cell" - what the hell is that? - Let me quote "The element will be displayed as a table cell (like <td> and <th>)".

 

The problem is not that Opera doesn't render it correctly. The problem lays in your coding technique. Making div block elements act as table cells is probably the stupidest thing I ever heard. It's as though you wanted to use tables but then found out css has this hidden css property.

 

So how in the world do you code with this crap?

- Well for starters, don't use javascript navigation hover effects. Take out all "display: table-cell;" and then I might shed some more light on your stupidity.

 

Don't underestimate my experience with html / css, simply because you are too stupid to notice your own mistake.

[BillyBoB]

Actually the thing I was accomplishing by putting that Display: table-cell. Is the ability to use the vertical-align. Seeing as if I remove it it messes it up in Firefox also. I was having a bad day yesterday sorry if I was being mean.

 

I was just trying to get an answer I hadn't slept for over 24 hours. I know this might not be excusable behavior so I just wanted to at least say sorry. I will try to see if I can't get the alignment with your way again. But I don't understand why you would put font size/height I can't find that on the web anywhere if you have some kind of tutorial that would be great.

 

So javascript shouldn't be used? Would you advise the css hover effect? Can css change the src item in a img because that is what I'm really looking for because I have 2 different images.

[BillyBoB]

Cannot edit post above sorry for double post.

 

I have found one fix for IE but my main concern is Opera.

 

I have changed this:

.tNavItem {
height: 6px;
text-align: right;
        vertical-align: middle;
padding: 0px 8px 36px 8px;
list-style: none;
display: inline;
}

 

into this:

.tNavItem {
height: 6px;
text-align: right;
list-style: none;
display: inline;
}


.tNavItem img {
vertical-align: middle;
padding: 0px 8px 36px 8px;
}

 

This works in IE but still doesn't fix the Opera as mentioned above.

[TheFilmGod]

You may need to upgrade Opera. I believe I am using the latest Opera version, 9.26, and it renders your website perfectly.

 

You don't have to cater for any older versions of Opera since it automatically upgrades it for you - unlike IE6 or IE7. 

 

You should also evaluate whether all your hard work is well spent. Do you really need to fix this, if it only affects Opera? Opera accounts for only 2% of all users. - Very little. I recommend using your valuable production time somewhere else!

 

........

 

You can always center text (vertically) using some padding. - Not the best solution, but fast and easy.

 

	font: 12px/23px arial, sans-serif;

 

Is an example of how to align text vertically. I'm not sure if it would work for display: inline; though. I rarely work with display: inline; so bare with me. This doesn't "in essence", align text vertically, it simplly makes the line-height expand that creates a vertically centered feel.

 

Today, you feel the wrath of css. It is one of the many reasons people don't like to switch from table based layouts because they feel frustrated - things like valign: ..., just don't work. Over time and practice, this will become second nature to you. 

[BillyBoB]

I am using the version 9.51 in Opera. Which I checked and is the latest version.

 

I am working to get your font trick to work on the subnavigation if you look at it is doesn't seem to want to work.

 

Edit: Never Mind didn't have it uploaded the right version of the style. It works great thanks a lot let me see if I can't do a little more than I will be done. Whatever I have done to the navigation it works in Opera now. Just need to align a couple more things.

 

Yea I actually was making all my sites with tables but I am trying my hardest to understand and work with xhtml/css.

[BillyBoB]

One last problem is that with the new css styles I can't seem to get the bottom bar the Copyright and footer navigation to align if you look in IE that's the only that won't comply.

[BillyBoB]

I am not trying to go against rules sorry for double posting but the post keep on not letting me modify. Probably the timeout feature.

 

http://syckgamingleague.com/Register/

 

On register on IE 7 the images that name the text fields don't align to the middle on every other browser they do.

 

This and the footer are the only other problems I am having with this css.

 

This site currently displays correctly in Firefox 3.0/Opera 9.51! There is one other thing I would like you to see if you could help me with in Safari there is a random white bar at the top of the page. I think it might be caused by a margin or padding or something of the sort. If you know the problem please help me out thanks in advance.

[haku]

I'll give you credit - I really wasn't impressed with your initial response to TheFilmGod, especially seeing as he is both REALLY good with CSS, and he was helping you out to be a nice guy, but it takes a big man to apologize, so good on you.

 

But DONT DO IT AGAIN. The people here are helping for free, out of the goodness of their hearts, and don't really care that you had been up for 24 hours. You are lucky theFilmGod is more forgiving than me - I would have accepted your apology, but I wouldn't have helped you after.

[TheFilmGod]

There is one other thing I would like you to see if you could help me with in Safari there is a random white bar at the top of the page. I think it might be caused by a margin or padding or something of the sort. If you know the problem please help me out thanks in advance.

 

Ever heard of google? Simply search for "Safari unexpected white space." If it helps add "margin or padding" in the keywords.