...

View Full Version : CSS Link & Layout Help



chilipie
09-19-2004, 05:01 PM
I have uploaded my first XHTML & CSS layout ( :p yey!) to http://spyderz.port5.com/index.html. However, I have two problems, both on the hosted version and locally. All but one link (the one that reads "XHTML 1.0") do not have the style I set in the style sheet (http://spyderz.port5.com/style.css), but revert to my browser settings (IE 6.0 :eek: ). I thought that external style sheets overide user preferences? I have checked the style sheet and HTML file thoroughly, but I can't find anything wrong.

Secondly, there is a small gap between my header image and menu. This might be an IE problem, but I have tried everything I can think of and it still doesn't work :( , so if any of you guys could find of some kinda remedy, it would be most appreciated :thumbsup: !

gohankid77
09-19-2004, 05:24 PM
Here are the problems I see with your page in Firefox:

Not centered like in IE
A gap between your bottom section and your menu (not present in IE)


What browser are you using to test every time to make sure it works? I recommend testing with Firefox and then correcting it for IE (if you are even concerned about cross-browser rendering).

Your centering problem is due to an IE bug. It misapplies the text-align attribute. Keep it, but add

margin: 0 auto;

to the the body element (I think). Adjust "auto" to your liking for centering, although this is a menu, so I think you want just the text centered rather than the entire page.

chilipie
09-19-2004, 05:35 PM
I am testing it with IE - I used to have Firefox but it kept crashing Windows so I uninstalled it.

gohankid77
09-19-2004, 05:44 PM
What version of Windows and what version of Firefox? Also, have you tried Mozilla or Netscape?

chilipie
09-19-2004, 06:19 PM
Windows XP Pro, and I'm not quite sure what version of Firefox, but the .EXE file say 1.0PR. And no, I haven't tried Mozilla or Netscape but I might try them.

I still can't get the links to work, they keep changing between my style sheet and IE default

gohankid77
09-19-2004, 08:34 PM
If you have predefined your browser colors in IE (which tells IE to disregard site colors), you will get IE's colors, not your style sheet's. As specified in CSS2, a user's style sheet overrides an author's style sheet.

chilipie
09-19-2004, 08:47 PM
How do you "undefine" the IE colours? Secondly, IE uses my stylesheet for the a:hover, but the predefined colours for a:link, visited, active, which doesn't make sense.

gohankid77
09-19-2004, 08:49 PM
Okay, I have Windows ME, but I'll see if I can help anyway...

Go to your Internet Properties (Tools-->Internet Options) and click the 'Colors' button. You should be able to figure out the rest.

chilipie
09-19-2004, 08:58 PM
Thanks gohankid77 :thumbsup: ! It looks loads better now, but I think I might get Mozilla for testing (I spent about 4 hours today trying to get that to work, and it was just stupid IE :mad: ). However, if anyone knows how to remove the gap between the header and menu bar that would be great as well :) .

gohankid77
09-19-2004, 09:01 PM
I don't see a gap between the menu bar and the header, but between the footer and the menu bar (only in Firefox).

/* Edit */

Hmm... The hover effects don't work in Firefox...

/* Edit */

Duh! I forgot! :link and :visited need to come AFTER :hover!

Antoniohawk
09-19-2004, 11:16 PM
Your centering problem is due to an IE bug. It misapplies the text-align attribute. Keep it, but add

margin: 0 auto;

to the the body element (I think). Adjust "auto" to your liking for centering, although this is a menu, so I think you want just the text centered rather than the entire page.
margin: 0 auto; should be applied to the element that you want centered. :)

chilipie
09-20-2004, 06:43 PM
Wahey :p ! It's centered in Mozilla! Thanks guys, you've helped loads :) . There are 2 things I still don't understand though - in Mozilla there is a gap between the menu/content area and the footer/content area. In IE though, there is only a small gap between the menu/content area, but not one by the footer. Also my links only half work in Mozilla and IE, so it can't be an IE problem.

N.B. If you're bored stupid with all these annoying posts you don't have to answer - but remember, I know where you live... :eek:.

Kidding ;) !

Latest link: http://users.quickfox.org/~chilipie/redblizzard/index.html

Antoniohawk
09-20-2004, 11:17 PM
I took the liberty of cleaning up some of your code and getting rid of those gaps. They were created by some weird margin on the paragraphs. Nothing that a little css couldn't fix. :)

CSS:

/* copyright 2004 redblizzard design */


body {

background : transparent url(images/back.gif) fixed;

font : small Arial, Helvetica, sans-serif;

text-align : center;

color : #000;

}



#header {

height : 100px;

width : 650px;

margin: 0 auto;

background: transparent url(images/header.gif) no-repeat;

}


#menu {

width : 650px;

padding : 0;

background-color : #c00;

margin: 0 auto;

}



#content {

width : 650px;

background-color : #fff;

margin: 0 auto;

padding: 0;

}

#content p {

background-color : #fff;

padding-top: 1%;

padding-bottom: 1%;

margin: 0;

}



#bottom {

width : 650px;

background-image : url(images/bottom.gif);

font-size: small;

margin: 0 auto;

}



#menu a:link, #menu a:visited {

color: #000;

font : bold small Arial, Helvetica, sans-serif;

background-color : #c00;

text-decoration : none;

}



#menu a:hover {

color: #c00;

font-weight: bold;

background-color : #000;

text-decoration : none;

}



#content a:link, #content a:visited {

color: #c00;

background-color : #fff;

text-decoration : none;

}



#content a:hover {

color: #000;

font: small Arial, Helvetica, sans-serif;

background-color : #fff;

text-decoration : underline;

}



#bottom a:link, #bottom a:visited {

color: #000;

font-weight : bold;

background-color : transparent;

text-decoration : none;

}



#bottom a:hover {

color: #c00;

font-weight : bold;

background-color : transparent;

text-decoration : none;

}
HTML:

<body>
<div id="header"></div>

<div id="menu">
<a href="index.html" title="home">home</a> |
<a href="services.html" title="services">services</a> |
<a href="aboutus.html" title="about us">about us</a> |
<a href="portfolio.html" title="portfolio">portfolio</a> |
<a href="contact.html" title="contact">contact</a>
</div>

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tempor. Curabitur adipiscing quam placerat pede. In hac
habitasse platea dictumst. Mauris ac eros in ligula consequat cursus. Aenean metus neque, accumsan et, interdum in,
hendrerit vitae, leo. Quisque ante. Aliquam augue sapien, venenatis a, consectetuer eget, varius eget, sapien. Donec
elementum feugiat lectus. Aliquam blandit, wisi quis venenatis egestas, orci dolor volutpat orci, id rhoncus arcu sem sed
nunc. Sed rutrum magna nec nulla. Aenean erat mauris, lobortis quis, tempor vitae, cursus id, ante. Aliquam vel ante a
magna tempus hendrerit.
</p>
<p>
Sed ac dui et eros tristique consectetuer. Aenean lacinia. Vivamus vitae sem vitae risus vulputate semper. Suspendisse eget
<a href="index.html" class="content" title="link">nibh fermentum</a> lectus mollis fringilla. Nam velit sapien, bibendum
commodo, mollis vel, lacinia et, diam. Mauris placerat ultrices dolor. Fusce a quam id risus pulvinar hendrerit. Nulla
pretium. Sed condimentum. Morbi blandit vehicula turpis.
</p>
</div>

<div id="bottom">
Copyright &copy; 2004 redblizzard Design. All rights reserved.
<a href="http://validator.w3.org/check?uri=referer" title="This page uses valid XHTML 1.0.">XHTML</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page uses valid CSS.">CSS</a>
</div>
</body>

chilipie
09-22-2004, 08:23 AM
Thank you SO MUCH!!!! :thumbsup: Everything works now! You are so kind :) .

Sorry I didn't reply before, my network wasn't working so I couldn't get online.

kraftomatic
09-24-2004, 03:02 PM
Dumb question .. what's "margin: 0 auto" do exactly?

Antoniohawk
09-24-2004, 10:50 PM
margin: 0 auto; is the same thing as margin: 0 auto 0 auto; or

margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
The two autos make the element position itself in the middle because it wants to satisfy both the left margin of auto and the right margin of auto. I hope that explains it a little more. If not, I bet that Ronald, Brady, or Andrew could do a much better job. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum