Fri, 2004-08-13 15:34
okay, i've got the bulk of my site done... however i'm having some major issues in a few areas, and as i've mentioned in earlier posts- i'm really new to this, and this is the first site i've attempted to build using css. so any help, pointers, suggestions are much appreciated.
here is the site:
http://www.brandtson.com/test/index2.html
here is the css:
http://www.brandtson.com/test/brandtson.css
here is the list of problems I am currently experiencing:
I have the #right <div> different on the 'tour' and 'about' pages.
in safari the page stops on the left side. the background stops and there is a white border at the bottom.
in ie the left side is just gone completely it's all white all the way down (true on all pages / not just the tour and about)
in netscape, the left side is fine, but the right is missing??? but the page displays fine, not cut off at the bottom?
also- on the tour and about pages - the #right <div> - <h7> tag has a cccccc background color... this only displays in ie, the text also looks fine in ie, but in safari and in netscape the bg color is just white, and the text displays really big?
okay, those are the big problems, or at least the ones i'm aware of at this point- this is driving me nuts.
one other issue that i can deal with, but would like to fix, is in the same right div, i would like all the <h4><h5> and <h6><h7> tags to 'bump' up against each other, they all have white space beneath them now, i've messed with the margins and padding, and i can't get anything to work.
oh well. i realize this is a lot, but if anyone has any suggestions much appreciation.
i would have given up on css had it not been for this forum, you are all absolutely wonderful people. thanks so much to everyone for all of the help and suggestions.
-matt
Sat, 2004-08-14 01:54
#1
okay, i could use a bit more help.
check these:
#container {
margin-right: 110px;
margin-left: 110px;
}
The margins are specified in pixels, but the rest of your thingy is specified in percentages like so:
#left {
width: 66%;
}
#right {
float: left;
width: 32%;
}
Getting rid of both those 110px margins will bring back the #right section where it should be in IE5 (before, #right showed up below the main text). You can also try giving the #container a fixed percentage, like 750px or whatever.
In your BODY section of the CSS, throwing this in:
text-align: center;
...and then giving #container:
margin: 0 auto;
will apparently fool buggy IE into making the thing centred again according to:
http://www.andybudd.com/archives/2004/02/css_crib_sheet_3_centering_a_div/
The heading spacing problem:
First, you need to get rid of some H5 u have lingering in the html, like here:
<h5>
<ul><li>08.13: Akron, OH @ The Lime Spider</li>
<li>08.18: Cleveland, OH @ The Odeon w/ The Raveonettes</li>
<li>08.21: Lewisberry, PA @ Purple Door Festival</li></ul>
</h5>
There are one or two other instances where you find H5 where it shouldn't be. Clean those up too. Once the UL are taken out of the headings, it's time to style your own ULs, something like this:
ul.custom {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #d097a9;
color: #333333;
font-size: .65em;
font-weight: normal;
padding: 0px 10px 0px 10px;
margin: 0 0 8px 0;
}
Apply the class="custom" to all the ULs you want that to apply to.
The Heading space problem:
Apply:
margin: 0 0 0 0;
under H4 in your CSS file.
Not sure about any of the other probs so far, but hopefully they'll help you some.