Browser Issues / Questions

[efhx]

http://studio-empire.com/

In IE6-7 The Logo at the top and the category section under the menu are too far up.

Also in IE6 the menu is way too long.. I used the 1 of the suckerfish menus but I noticed it has 2 widths for some elements :confused:

If possible could these problems be explained because most of my problems are browser related..so would want an explanation so i could fix the problems better on my own


I have a mac so I can't test this site too well other than browsershots.. is there any other alternatives so I don't have to wait for browsershots to load the screenshots? I don't mean a alternative to browsershots but somethin to where I can run IE6-7 or something that simulates it


Thx :thumbsup:

[Excavator]

The logo looks to be getting pushed around by the default h1 margin. Try this:
* {
margin: 0;
padding: 0;
}
#container
{
margin-left: auto;
margin-right: auto;
background-color:#fff;
width: 779px;
}
#header
{
margin-left: 20px;
margin-right: auto;
background-color:#fff;
padding-top:10px;
width: 749px;
height: 153px;
}
#header h1 {
background:transparent url(../images/header.gif) no-repeat 0 0;
padding-left:5px;
text-indent: -9000px;
}
#header h1 a {
display:block;
height: 130px;
margin-top: 20px; /*adjust this setting*/
text-decoration:none;
width:427px;
}

[efhx]

what does the * do? wanna know so if I run into this problem agn i know what exactly it does

[Apostropartheid]

Well...get a copy of Windows, tbh. If you're serious about web development, you might as well.

* is a universal selector. It selects every element on the page. Or, well, ever. :D

[efhx]

ahh i hate windows :| is this the only way?

[efhx]

also, after putting


* {
margin: 0;
padding: 0;
}
in my css the <li> tags got messed up http://studio-empire.com/community/
if you go there its the text thats on the edge of the page.. how do i fix?
also should i always put

* {
margin: 0;
padding: 0;
}

in my css files? never used or seen it before

[Excavator]

also, after putting


* {
margin: 0;
padding: 0;
}
in my css the <li> tags got messed up http://studio-empire.com/community/
if you go there its the text thats on the edge of the page.. how do i fix?


That little bit of CSS zeros out all the default margin and padding. That will eliminate a lot of problems because different browsers have different defaults.

Now that margin/padding is all zero, you have to specify your own when you need it. Your li's need a margin to fix them... or the a inside the li, I didn't go look.

[efhx]

ah ic :) ill try n fix it then thx

[efhx]

i found something called crossover mac.. can i use this to test IE6 and IE7? wanna check before i pay for it

http://www.codeweavers.com/products/cxmac/

does anyone use this?