EDIT
New thread created---- discussion about CSS deserved its own thread...
Printable View
EDIT
New thread created---- discussion about CSS deserved its own thread...
Hi, Matt, first of all thanks for your great support my site is finally up. I wanted to note thatwill not validate with Strict doctypes and also it is a bad practice to open links in a new window. The choice of opening a link in a new window should be left to the user. These days even IE 7 supports tabs, right click on a link open in a new tab/new window. I don't know about you but I am always pissed off when I click on a link and it opens a new window. Whould give you a URL to a good page describing all of this, but I forgot the link.Code:target="_blank"
Most site owners don't want their visitors to leave their site, so when linking to external sites most prefer to open a new window.
Anyways if anyone wants to remove the "_blank" think all they need to do is edit the source and thats fine by us. It was more of a convenience factor for the masses that a rule that had to be followed.
And if you are as good as you say you are in CSS why don't you have a look at our homepage in IE7 and tell me why it is that the footer wants to float over the text about 3/4 of the way up in that silly browser ;)
Haha, so you are asking a 20 year-old highschool dropout to help you with your site :nuts: shame on you :dunce:
I got a local "copy" of that page... and took a glance.
Oh my god :eek:, fix your errors!!! Where did you hide your <html> tag? I know you sold it to someone :D Also read this if you got some free time: http://hixie.ch/advocacy/xhtml
I see that you are using #container{height:100%} and no height set on body, html I assume you don't fully understand the way percentages work for height property: http://w3.org/TR/CSS21/visudet.html#propdef-height
Sorry, I don't have that much free time, since I'm redesigning my site to put on my newly baked host. However this is some quick info I see:
Umm, don't really know how to explain this...
Footer in IE7 seem to stick to the same place where the #container stops (do #container{oveflow:auto;} to see what I mean.
I don't know if it is a bug or you screw something up, BUT:
fixes the issue (probably breaks something else though) so I would assume you screw up the height somewhere there. If it doesn't break anything might just stick it into an IE 7 only conditional comment http://zoffix.freehostia.com/ie/condcom.htmlCode:#contentf * {height:auto!important;}
Ask MicroSoft why it does that, I'm sure they will happily tell you :emlaugh:
Good luck fixing it... adios :waves:
...well wanted to also note that you can use this fix and also append !important to any height declarations that you make in that class, this way I can say it is fully fixed :movies: Also what is this little pic right below the "Posts: 6" with ALT "Zoffix Znet is on a road to...", I searched the FAQ couldn't find anything relevant.
Wow, nice catch where the heck did that opening html tag go...as for the rest, I'll read up on it in a bit and play around with the stylesheet a bit and see how it goes. heh, and I know we were validating XHTML transitional at some point on most of the pages. Weird.
By golly your fix worked ;)
Thanks for that, it was bugging me for a long time! Now the second one is why the testimonials dont appear in the footer of IE but they do in every other browser....Ask MS right? :laugh:
That is bulletin board reputation. You get them after "x" posts, or if a moderator or other users give you reputation points. Reputation points are added to users by clicking the little scale icon thing in the same blue bar where the post date is located, above your avatar.
Quote:
User Reputations:
vBulletin's user reputation system provides a way of rating users based on the quality of their posts. Users on your forums can add or subtract reputation points from other users by clicking the reputation link in their posts. You can set restrictions on the giving and taking away of reputation points by users in your vbulletin options.
User reputations allow the users in your community to tell vBulletin which users are quality and which users are not. And in response to user feedback, vBulletin has the ability to label and reward users for the quality of their posts, as is indicated by their reputation.
You can label quality users by defining reputation levels in the User Reputation Manager. User reputation levels work very similar to user titles and user ranks in that they are an indicator of status that are displayed next to names in posts.
You can reward quality users by creating promotions on the Promotions page. Promotions are used to change a user's group memberships when they meet certain conditions, one of which can be their reputation level. Because forum permissions can be controlled with group memberships, a user's reputation in conjunction with promotions can be used to control a user's forum permissions. And so by using a combination of user reputations, promotions, and group permissions, you can enable your community to reward and punish good and bad posters on your forums.
Well, it seems that it is not a CSS issue, the validator ( http://validator.w3.org/check?uri=http://glowhost.com ) is complaining about some unclosed tags, I don't know what you've changed since the last time I got a copy of index.html but on my local copy
I simply closed the <object> tag right awayCode:<div id="footer" style=" margin-left:auto;margin-right:auto; padding-bottom:5px;padding-top:5px;border:none; text-align:center;color:">
<a href="http://glowhost.com/about/testimonials-and-awards.php" target="_self" >
<object>
<div style="padding-left:160px; margin-bottom:5px;background-image:url(/images/testimonial.png);
and it worked... the rest is your job ;)Code:<object></object>
<object> tags - removed, fixed the footer. No idea how those got there...removed em all from that page actually. Thanks for that one too :)
Well you are right, fix one thing, break another.
Now here is the question that wins some of your hosting fees back in the for of a refund....
Code:#contentf * {height:auto!important;}
This cures the IE7 footer issue, but kills the flash content on the page. It shrinks it up and makes it pixelated due to the resize.
So, if you can figure out how to get
Code:#contentf * {height:auto!important;}
Working in tandem with the flash content across IE6, 7 and firefox....you got some funds coming your way.
Wow, the code seems to be even more broken that it is used to be :nuts: now even in FireFox the white background doesn't go all the way down :laugh:
Anyhow here is a fix:
Clear floats:
Fix the Flash (I've added an id="flash" to that movie just in case you have other flash movies there):Code:</div>
<!--End regular page content -->
<!-- Closing divs for included files that opened them -->
</div>
<div class="clearer"> </div>
</div>
<!--End closing included divs -->
</div>
<div id="footer"...
And if I were you I would put this fix in the IE 7 condcom, since iirc the footer is broken in IE 7 only... http://zoffix.freehostia.com/ie/condcom.htmlCode:#contentf *
{
height:auto!important;
}
#contentf embed#flash
{
height: 240px!important;
width: 320px!important;
}
Now that was extremelly hard to figure out :doh: ... better get some beer :dunce:
Cheers
P.S.: Nice smileys... although a few of them I've seen before somewhere and they are quite identical :thumbsup: :tux: :peace: :gone:
eeh, forgot the declaration
But pretty much any float clearing method will do :movies: (by the way this is regarding the white background not going far enough, not regarding the flash fix)Code:div.clearer
{
clear:both;
height:1px;
}
Sorry for so many posts, but the background doesn't go all the way out only on my local copy :) false alarm, but at least I got a chance to tell you to remove #container{height:100%;} what is this for? :eek3: doesn't do any good as I see it, did you mean min-height ( http://w3.org/TR/CSS21/visudet.html#propdef-min-height )? Yeah stupid IE < 7 doesn't support it, but the fix is trivial:
Keep in mind that 100% is not exactly what you want find something that doesn't give you scrollbars on a page without scrollbars :evilbanan: :peace:Code:CSS:
#container {min-height: 100%;}
....................................................
HTML:
<html>
<head>
<!--[if lt IE 7]>
<style type="text/css">
#container {height: 100%;}
</style>
<![endif]-->
</head>
...
First of all you said you were not old enough to drink, so put the beer down. :p
Second of all, thanks for confusing the hell out of me. :confused:
Third, I will absorb this and report back to you after i have frustrated myself for numerous hours I am sure. :idea:
Cheers. Now I am off for a beer. Now where did that beer smiley go.....
I'm in Canada, it's legal here :P
Basically, you have <embed .... height="240" width="320" ....>
for your flash, and the specs say that CSS should override element's attributes, therefore when you used #contentf * {height:auto!important;} instead of height=240, width=320, you were getting height: auto, width: auto; for it, and when you put
you pretty much put the height and width back as it is specified with parameters. since this selector is more specific then #contentfCode:#contentf embed
{
height: 240px!important;
width: 320px!important;
}
And as far as the #container{height:100%} goes, well just create an empty page with a div and put height:100% on it and see what happens ;)
cheers... :movies:
Well I give up. I am sure it is impossible now.... Let me know if John-Marc hires you I might need some work done as well :)
What do you mean impossible? just put this in your stylesheet:
#contentf *
{
height:auto!important;
}
#contentf embed#flash
{
height: 240px!important;
width: 320px!important;
} And you are done! :cartman:
Well, as I understood from his e-mail he is busy and is not planning on doing so right now...
I tried it like a bagillion times with all sorts of different varients.
DOH!:doh:
Its either:
1. The flash gets scrunched up and pixellated and the footer stays put
OR
2. The footer floats around and the flash looks like it was intended.
I uploaded your suggested fixes so you can see the working footer and bad flash.
IE7 who needs it!
Hehe, you need a vacation :doh: indeed....
selects an <embed> element with an id="flash" so either add an ID to that flash or use #contentf embed if you don't have any other <embed> elements in that container... cheersCode:#contentf embed#flash
{
height: 240px!important;
width: 320px!important;
}
P.S.: Never say "it's impossible..."
The homepage looks very broken this morning, all stretched
Nothing looks stretched except for the Flash, because *someone* :pimp: doesn't select it properly :nuts:
What browser by the way?
I suggest we rename this thread to "CSS Problems and Solutions"
Here is my problem:
Why does IE 7 instead of scaling the fonts the way normal browsers do scales everything on the page thus totally breaking the layout?
Here is one that I sort of know a fix, but was looking for some one-liner:
http://zoffix.com/css/ie/condcom.html How can I make Lynx display the table on that page a bit prettier so you could see that it is a table (come on table people, you love your tables so much this should be a no brainer to you :laugh:)
:gone:
very very stretched! Using ie6 see attached, scrolled down a bit to take this screen shot
Interestingly, if i save the page and open it in dreamweaver then it displays fine :) within dreamweaver. I can then click on the preview button and it displays propberly in ie6. Will leave this for the experts!
Wow Andychev thats great to know. lol.
Who would have thought. Bad part is all 3 of my normal workstations have IE7 on them now. Need to go find another computer at some point that has IE6.
How's it look now if you get a chance before I do?
Weird thing is, I looked on ie 6 this morning after I read andys post and it was fine, then 15 minutes later .... poof!
Sounds like el cacherito to me...
Still messed up in IE 6?
Well no one said you could not start your own thread called that!
I think we all know the answer to that? Browsers don't suck, IE sux?Quote:
Here is my problem:
Why does IE 7 instead of scaling the fonts the way normal browsers do scales everything on the page thus totally breaking the layout?
As for the linx thing, I'll check it out later today.Quote:
Here is one that I sort of know a fix, but was looking for some one-liner:
http://zoffix.com/css/ie/condcom.html How can I make Lynx display the table on that page a bit prettier so you could see that it is a table (come on table people, you love your tables so much this should be a no brainer to you :laugh:)
The flash looks better as that was all pixalated before but the whole page is still streched as above
Zoffix, I rarely design for Lynx but I think your code is fine, its just maybe a screen size issue?
It seems the long line after "The Not Operator" is the first thing that trashes the otherwise nice looking table in Lynx.
I think the argument on css sucking needs resurecting!
It just gets weirder, I load the homepage and it is all stretched, however, go into view and font size and change the font size to anything different to what it is on and the pages fixes itself. Click the refresh on with that new font size and it breaks again.
Maybe this will help solve the problem!
I think I finally got it working the same in IE6, IE7 and FF.
Who knows what else is broken but after I looked at that homepage in IE6 it was highly motivating to find the fix fast. LOL
Thanks for the contribs andychev and Zoffix Znet
If you would to re-read all my posts I am sure you would find that I've said about two times that height: auto!important fix should be put into IE 7 ONLY conditional comment :smash:. Didn't see any stretching in IE 6, but I'm 99% sure that it was caused by some elements loosing hasLayout, and Peek-a-boo bug might been doing that. Since IE 7 came out I've talked to dozens of people that were complaining that the Tan hack is now messing things up in IE 7, wouldn't have happened if they would use cond.coms. If the page is not broken in other browsers why do you put the fix for them? No wonder why you think CSS sucks... heh
Hey, I've just found that http://www.glowhost.com/forums/memberlist.php is broken.
This is the way it looks in FireFox 2.0 http://www.zoffix.com/new/del/glow.png
And this is IE 6 http://www.zoffix.com/new/del/glow1.png
Basically, your table overflows, thus causing ugly effects especially with the background.
I just noticed that I see the overflow right in the window I am typing right now =)
I'm using 1158xsomthing resolutiong
You may look into CSS Overflow property ( http://w3.org/TR/CSS21/visufx.html#propdef-overflow )
Cheers
I dont see how it would fix anything, its a vbulletin problem IMHO because of the avatars and all the other images and colums that are in there, its going to inherently be some fixed width. Certainly more than something that will fit in 600x800 screen size no matter what happens with overflows. Ugly, I agree.
I think the sure fix would be to disable it from appearing.
Okay I have been reading around and I wonder why use conditional comments when one thing that seems possible is to reset each browser's internal stylesheet and make it from scratch.
Seems like a MUCH cleaner approach to me (if it works) because we don't have a bunch of clutter in the stylesheet.
Yahoo! UI Library: Reset CSS