I have a few issues with my new weblayout, please help?

Hey there, i started making a new website layout yesterday, i'm a beginner and its my first weblayout...

hope you like it btw [tell me what you think]. I have some issues with it, like it doesn't show up the

same way in Intenet Explorer (ie) as in FireFox (FF). And i also need to ask you something about the css

coding...

First problem: I set a margin (margin-top) to the header text that says "Blubbz.com" and Internet

Explorer doesn't seem to read it at all for some reason. But FireFox reads it perfectly. Can i fix that

somehow? Take a look at the source if you want...? And also... when i asked my friend to look at the

page, all the transparent pictures on the site, the background shows up as white :S? I wan't it to be

transparent... look in the screenshots below... (P.S, i saved the pictures as .png files as i know that

they are good for transparency...)


My second "problem": I know how to change the style of a class for a link... like:

.testclass {
color: FFF;
text-decoration: none;
}

.testclass a:link {
color: F2F2F2;
text-decoration: underline;
}

That would make it change the color and add a underline when i hover it... But is there a way to style

it so that i don't have to use two seperate tags (or whatever its called..) like this:

.testclass a:link, a:visited {
color: FFF;
}

As you can see i used both "a:link" and "a:visited" in the same "tag"... but this doesnt work, well, not

that way... i know i can do it but i just don't understand how i do it. I hope you get what i mean...


Screenshots of the page:

Shot 1: http://e.imagehost.org/0275/pic1.jpg - Taken by my friend. (internet explorer)

Shot 2: http://e.imagehost.org/0523/pic2.jpg - Taken by me, i want it to look like that!

Shot 3: http://e.imagehost.org/0758/pic3.jpg - Taken by me, with internet explorer.



Thanks, Nike :D

Can we have a link to your page rather than screen shots?

Kind of stupid of me, sorry i forgot...

the layout is located at: http://www.blubbz.com/web/index.html

First problem: I set a margin (margin-top) to the header text that says "Blubbz.com" and Internet

Explorer doesn't seem to read it at all for some reason. But FireFox reads it perfectly. Can i fix that

somehow? Take a look at the source if you want...? IE doesn't support fixed positions. So your margin-top: 55px; applied on .header-text is being calculated from the bottom of your top-bar in IE. Just remove that fixed position and other related styles like top,left etc(which has no significance then), and then adjust the margin top value to something like 23px (top-bar would stick at the top automatically!)

PS: CSS is cascading stylesheet, so there is no need to repeat all styles.

You don't want "a:link" to change the color when it is hovered over. You want "a:hover" for that. You will need two declarations as you have two different things (you want different colors and underlining, right?).

Thank you, i removed the css as you told me to and its working. But the reason i used the "position: fixed" for the top-bar is becouse i wan'ted it to stay up there even if i scroll further down on the page... And now when i've removed that css it doesn't scroll with the page...? Is there another way to fix that?

and... *PS: CSS is cascading stylesheet, so there is no need to repeat all styles. *
what do you mean?


And the reason why ie didnt read the transparency is becouse it doesn't support transparent .png files (the new version 8 does support it, but 7,6 and older versions doesnt). So if you know some kind of trick to bypass that it would be great. I know it works becouse ive seen it on some sites.

Thanks again :D

@jerry62704 yeah i know that... but i don't want to have different colors for ex the "active" state and the "hover" state... those could be the same...

and... *PS: CSS is cascading stylesheet, so there is no need to repeat all styles. *
what do you mean? Look at your CSS. You are repeatedly assigning the same properties, (which would inherit by default) on all inner elements, say
font-family:Georgia,"Times New Roman",Times,serif; Just apply the above style on your body, and remove all other occurrences of the same. Then, you could apply a different one on a specific inner element, if required.

There are many more similar cases, like
.menuitem a:link, .menuitem_alink {
background-position:center;
background-repeat:repeat-x;
border-left-width:2px;
border-right-width:2px;
color:#FFFFFF;
float:left;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
font-style:normal;
font-weight:normal;
height:20px;
margin-left:15px;
margin-top:12px;
padding-left:14px;
padding-right:11px;
padding-top:4px;
text-decoration:none;
width:auto;
}
.menuitem a:link {
background-position:center;
background-repeat:repeat-x;
border-left-width:2px;
border-right-width:2px;
color:#FFFFFF;
float:left;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
font-style:normal;
font-weight:normal;
height:20px;
margin-left:15px;
margin-top:12px;
padding-left:14px;
padding-right:11px;
padding-top:4px;
text-decoration:none;
width:auto;
}
.menuitem a:visited {
background-position:center;
background-repeat:repeat-x;
border-left-width:2px;
border-right-width:2px;
color:#FFFFFF;
float:left;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
font-style:normal;
font-weight:normal;
height:20px;
margin-left:15px;
margin-top:12px;
padding-left:14px;
padding-right:11px;
padding-top:4px;
text-decoration:none;
width:auto;
}
.menuitem a:hover, .menuitem a:active, .menuitem_ahover {
background-position:center;
background-repeat:repeat-x;
border-left-width:2px;
border-right-width:2px;
color:#BCE4FC;
float:left;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
font-style:normal;
font-weight:normal;
height:20px;
margin-left:15px;
margin-top:12px;
padding-left:14px;
padding-right:11px;
text-decoration:underline;
width:auto;
}

Select all common rules from the above case and apply them directly on .menuitem a. Then apply the specific rules only on the pseudo elements, like
.menuitem a:link, .menuitem a:visited{text-decoration:none;}
.menuitem a:hover, .menuitem a:active{text-decoration:underline;}

Alright, i understand now :)

But the top-bar still isnt staying at the top as i would want it to :(? I wan't it to be fixed, is there some other way to make it stay there without using the "position: fixed;" method?

I see it at the top in FF? Which is your browser? You may perhaps need
*{
margin:0;
padding:0
}in your CSS.

Yeah its at the top of the browser... but i want it to stay on top even if i scroll further down on the page... like a toolbar... Even if im at the bottom of the page i want to see it.

Oh.. I see.
position: fixed is not supported by Explorer 6 and lower on Windows; nor by Explorer 7 in Quirks Mode. In Strict Mode Explorer 7 supports it fine, though.
You may need to use some javascript(or css expression) (http://www.howtocreate.co.uk/fixedPosition.html) hacks or "cssplay's fixed (http://www.cssplay.co.uk/layouts/fixed.html)" method to get this effect in IE.

alright, thanks then :P