Help - Search - Members - Calendar
Full Version: need help with CSS
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
qqweb
Hi, This is my first time creating a website using CSS and I am having problems mostly when viewing my website in IE. The website is pretty simple but I am stuck with it. Here's a link to my website layout and the CSS codes.

myweb

CODE
/* CSS Style Sheet */

html, body {
        margin: 0;
        padding: 0;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#000000;
    background-color:#e5e5e5;    
        text-align: center;
}


body {
    min-width:766px;
}

.container {
    background-image: url(images/background.jpg);
    background-repeat: repeat-y;
    background-position: center bottom;
    background-color: #e5e5e5;
    margin: 0 auto;
    padding: 0;
    width:766px;
    text-align: left;
    color: #000000;
}

#header {
   background-image: url(images/top.jpg);
   background-repeat: no-repeat;
   width: 766px;
   height: 343px;
   margin-bottom: 0px;
}


#header .title { padding: 260px 0 0 140px; text-align: left; }


#menu a i {
   visibility: hidden;
}

#menu a {
  position: absolute;
  text-decoration: none;
  height: 142px;
  width: 77px;
  top: 100px;
}

a#profile { margin-left: 620px; top: 100px; width: 54px; height: 20px; }
a#media { margin-left: 594px; top: 127px; width: 77px; height: 18px; }
a#news { margin-left: 630px; top: 154px; width: 42px; height: 17px; }
a#gallery { margin-left: 619px; top: 181px; width: 53px; height: 20px; }
a#guest { margin-left: 597px; top: 209px; width: 75px; height: 21px; }

a#profile:hover,
a#media:hover,
a#news:hover,
a#gallery:hover,
a#guest:hover { border: none; }

img{
    border:0;
}


#main {
  background-image: url(images/background.jpg);
  background-repeat: repeat -y;
  background-position: center top;
  margin:0 auto;
  padding: 0;
}

#main .mainpad {
  padding: 0 105px 25px 140px;
}


p {
   padding: 0 0 0 20px;
}


.picpadding {
   padding: 0 5px 20px 39px;
}

#footer {
   background: url(images/footer.jpg) no-repeat;
   width: 766px;
   height: 141px;
   color: #8f8f8f;
   clear: both;
   text-align: center;
   padding: 0;
   margin: 0;
}

#footer .padding {
   padding: 23px 0 0 62px;
}

#footer a {
   color: #8f8f8f; text-decoration:none;
}

#footer a:hover {
   text-decoration: underline; color: #881d1d;
}



I used imagemap in the header to create navigation menu. I used this website as reference. The menu works fine in Mozilla but when I opened it in IE, it only worked for the index.html page. When I removed the #menu a i {visibility: hidden;} the links appears and I can click them but when I put the visibility back it won't work. It's strange because it used to work fine before.

Another issue, I used background repeat for the main div but when I validated the CSS it gave a value error: background-repeat Too many values or values are not recognized : repeat -y. Any idea how to fix this?

Lastly, is it possible to use two layout for one website? I want the main index page to have two columns fixed. How to do this in CSS? Should I create another div container?

Sorry for my bad English. Any help would be greatly appreciated. Thanks
Frederiek
I'm not sure about the IE problem (I'm on Mac). Have you followed the ALA article to the letter? I couldn't find a border: none; for your menu links in your CSS, as suggested in the article to circumvent an IE bug.

As for your background-repeat question, there shouldn't be a space in the property value.
It should not be "repeat -y" but "repeat-y". See http://www.w3.org/TR/CSS21/colors.html#pro...ckground-repeat.

And overflow-x or overflow-y don't exist, hence the errors given by the W3C CSS validator. See the overflow property and which values it can have at http://www.w3.org/TR/CSS21/visufx.html#overflow.

Sure you can have different layouts for different pages. Just give those div's distinct names/id's.
For exemples, see http://www.maxdesign.com.au/presentation/page_layouts/ or http://www.456bereastreet.com/lab/developi...sslayout/2-col/.
pandy
overflow-x and -y could be part of a fix for IE.
Frederiek
Ah, ok. I only know the W3C is talking about the implementation of it in CSS 3.
pandy
Yeah, for that reason there may be other browsers than IE that support it now. Not sure.
Christian J
Firefox and Safari support it now.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.