Exhausting my limited CSS abilities

[Malice]

I swear I have tried every possible option (I know realistically I haven’t) and I cannot for the life of me get this page to display correctly both in IE and in FF.

http://www.ultimatehikeforacure.com

In IE7+ my horizontal rule runs off of the "Latest News" block… UGH! WHY!?!?!

In FF my horizontal rule displays correctly but then the "Latest News" block wont stay at full width unless I add the additional periods after the text.

My width commands are failing me and I’m sure I’m just missing something ridiculous and ANY help would be greatly appreciated.

Please don’t judge my code layout just yet, this site is still being repaired daily and I’ll clean up the CSS when all is said and done.

Code:

/*
Theme Name: UltimateHike
Theme URI: http://www.d2webdesigns.com
Description: Another design for The Ultimate Hike for a Cure
Version: 3.0a
Author: Dennis Stevenson
Author URI: http://www.d2webdesigns.com/

Primary Colors:
bgcolor: #423820
textcolor: #n/a
texthover color: #n/a
heading1 color: #n/a
*/

/* CSS RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

/* <--- END RESET ---> */

body {
background-color: #423820;
text-align: center;
}

/* Navigation Menu */

ul{
list-style-type:none;
padding-top:37px;
padding-left:20px;
}

li{
display:inline;
}

a{
font-family: Calibri, helvetica, georgia, sans-serif;
float:left;
width:100px;
text-decoration:none;
color:white;
background:#2a5162;
padding:5px;
border-right:1px solid #FFFFFF;
}

a:hover{
background:#CCCC00;
}

a.dbutton:link{
text-decoration: none;
padding: 0px;
}

a.dbutton:visited{
text-decoration: none;
padding: 0px;
}

a.diabetesbtn:link{
width:578px;
text-decoration: none;
border: 1px solid #000;
padding: 0px;
margin-left: 400px;
margin-top: 15px;
}

a.diabetesbtn:visited{
width:578px;
text-decoration: none;
border: 1px solid #000;
padding: 0px;
margin-left: 400px;
margin-top: 15px;
}

.heading {
margin: 0;
padding: 0;
border-bottom: solid 1px;
border-right: none;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
color: black;
width:200px;

}

.heading:hover {
text-decoration: none;
color: #443d62;
margin: 0;
padding: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
color: white;
}

.heading:visited {
margin: 0;
padding: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
color: black;
}

.quote {
padding-top: 210px;
padding-right: 50px;
color: white;
font-family: Calibri, helvetica, georgia, sans-serif;
font-size: 80%;
text-align: right;
}

p{
font-family: Calibri, helvetica, georgia, sans-serif;
}

/* End Navigation menu */

#wrapper {
background-color: #423820;
width: 1025px;
text-align: left;
margin: 0px auto;
overflow: hidden;
}

#navigation {
background-image: url(../images/navigationBar.png);
font-family: Calibri, helvetica, georgia, sans-serif;
border: none;
z-index: 2;
height: 76px;
width: 885px:
margin: 0px 0px 0px 0px;
position: relative;
top: 0px;
text-align: left;
background-repeat: no-repeat;
}

#header {
background-image: url(../images/header.png);
border: none;
z-index: 1;
height: 236px;
width: 885px:
margin: 0px 0px 0px 0px;
position: relative;
top: 0px;
text-align: left;
background-repeat: no-repeat;
}

#latestNews {
background-image: url(../images/latestNews.png);
background-repeat: no-repeat;
border: none;
font-family: Calibri, helvetica, georgia, sans-serif;
color: white;
position: absolute;
top: 325px;
left: 130px;
height: 506px;
width: 256px:
float: left;
overflow: hidden;
}

#content {
background-image: url(../images/content.png);
background: #dee9e9;
border: none;
height: 526px;
width: 756px:
padding-top: 0px;
padding-left: 280px;
padding-right: 50px;
overflow: auto;
background-repeat: no-repeat;
}

#footer {
background-image: url(../images/footer.png);
border: none;
height: 92px;
width: 885px:
margin: 0px 0px 0px 0px;
position: relative;
top: 0px;
text-align: left;
background-repeat: no-repeat;
}

#donate {
border: none;
z-index: 6;
position: absolute;
top: 175px;
left: 30px;
height: 50px;
width: 200px;
overflow: hidden;
text-decoration:none;
padding:0px;
}

[ikthius]

you have inline css and external CSS for your later news……

I would suggest only using the external

in your CSS make your left:20px; in your #latestnews, but thats only tested in FF through firebug, i think you have it at 130px from left

[Malice]

That only fixes the issue if your viewing it within Firebug.
Since the LatestNews section has an absolute position it will move with your firebug screen, so you would have to view it full screen to see the impact.

Still fiddling…

[Rob MacKay]

Obviously Ikthius is right there.

You are using padding to position the text – never ever ever ever ever ever ever (etc…) use padding or margins to position elements, it always renders wrong.

For example

#content {
background-image: url(../images/content.png);
background: #dee9e9;
border: none;
height: 526px;
width: 756px:
padding-top: 0px;
padding-left: 280px;
padding-right: 50px;
overflow: auto;
background-repeat: no-repeat;
}

Dont do that – What you should think about doing is keep your content div and create another div that comes after your "latest news" div. Float the latest news and the new div left, then put all your text content in the new div.

Have a look through your document and everytime you use margin or padding to physically move text or objects to a specific point in the page, remove and replace with

#myexampleitem {
width:100px
height:100px
position:relative;
left:100px;
top:100px;
}

The position attribute is how you should always position items.

If you set the position of your wrapper div to relative, any element you postion inside it will reference its position to the wrapper. If you dont give the wrapper a position, when you set the position to your elements they will be relative to your browser window, and not relative to the div they are contained in.

Positioning can be a little strange at first, but its the only way to place elements successfuly.

[Rob MacKay]

because what I typed was pretty much gobbledy gook (In the second part anyway) have a look at this

http://www.alteredaspect.info/clients/example.jpg

Remeber if you do that to set your wrapper div position to relative, then your content div will know where to get its position from.

Its always good practivce to set alteast a relative position to items, its a very passive positioning that does not require top/left px settings – it will just rest where it should, in relation to the containing element. if the containing element has no position set, then then it will look to all the way down your document tree until it finds the browser window. The browser window is default and it will set its position to that. Thats why positioning sometimes dosnt seem like its working for alot of people :)

[ikthius]

"Malice" wrote:

That only fixes the issue if your viewing it within Firebug.
Since the LatestNews section has an absolute position it will move with your firebug screen, so you would have to view it full screen to see the impact.

Still fiddling…

well after stealing your code and testing it, in another browser it worked, looking at it in another resolution it did not.

I seen yesterday that you never wrapped your content parts in seperate divs this could help with the issue.

and as rob says, your positioning is off for the areas.

This is how I would do it:
body, wrapper, header (and all things header within), main, sidebar (all things sidebar), maincontent (all things main content), clear floats, footer (all things footer)
Positioning all of them relative to their outer divs.

but as I said it’s just how I would do it

[Malice]

I’m still working on it, and I’ve taken all the feedback and suggestions into account. There is still an issue where my new div containing the content sitting withing the contentarea div isn’t snuggling up next to my latestnews div as it should… I’ll play with it some more before posting updated code.

[ikthius]

"Malice" wrote:

I’m still working on it, and I’ve taken all the feedback and suggestions into account. There is still an issue where my new div containing the content sitting withing the contentarea div isn’t snuggling up next to my latestnews div as it should… I’ll play with it some more before posting updated code.

position:relative;
display:block;
float:left;

don’t have any spacing via padding/margin to see how it looks then decide what is best…

also I like adding a border to all of my div elements to see exactly how it is (if I am struggling), it can always be taken out later

for your sidebar and main content area

[Malice]

Ok made many of the mentioned changes (some I corrected before the latest suggestions) and I think it’s substantially better.

I run into an odd anomily where FireFox plops a scrollbar in the content div where IE just expands the box but something I can easily live with.

These forums have been a countless source for me and I greatly appreciate the help. As a matter of fact, I pretty much learned CSS from scratch in these very forums… now.. that’s not saying much compared to many of the experts here but man am I happy =D

Code:

/*
Theme Name: UltimateHike
Theme URI: http://www.d2webdesigns.com
Description: Another design for The Ultimate Hike for a Cure
Version: 3.0a
Author: Dennis Stevenson
Author URI: http://www.d2webdesigns.com/

Primary Colors:
bgcolor: #423820
textcolor: #000
texthover color: #CCCC00
*/

/* CSS RESET */

html, body, div, h1, h2, h3, h4, h5, h6, p,
a, font, img, ins, strong, b, u, i, center,
ol, ul, li, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-family: Calibri, helvetica, georgia, sans-serif;
}

/* <--- END RESET ---> */

body {
background-color: #423820;
text-align: center;
line-height: 1;
}

/* Navigation Menu */

ul{
list-style-type:none;
padding-top:37px;
padding-left:20px;
}

li{
display:inline;
}

a{

float:left;
width:100px;
text-decoration:none;
color:white;
background:#2a5162;
padding:5px;
border-right:1px solid #FFFFFF;
}

a:hover{
background:#CCCC00;
}

/* End Navigaion Menu */
/* Diabetes Buttons */

a.dbutton:link{
text-decoration: none;
padding: 0px;
}

a.dbutton:visited{
text-decoration: none;
padding: 0px;
}

a.diabetesbtn:link{
width:578px;
text-decoration: none;
border: 1px solid #000;
padding: 0px;
margin-left: 400px;
margin-top: 15px;
}

a.diabetesbtn:visited{
width:578px;
text-decoration: none;
border: 1px solid #000;
padding: 0px;
margin-left: 400px;
margin-top: 15px;
}

/* End Diabetes Buttons */

.quote {
position: relative;
top: 155px;
left: 250px;
color: white;
font-size: 75%;
text-align: left;
}

p{
font-family: Calibri, helvetica, georgia, sans-serif;
}

#wrapper {
background-color: #423820;
width: 1000px;
text-align: left;
margin: 0px auto;
overflow: hidden;
position: relative;
}

#navigation {
background-image: url(../images/navigationBar.png);
height: 76px;
width: 1000px:
position: relative;
text-align: left;
background-repeat: no-repeat;
}

#header {
background-image: url(../images/header.png);
height: 236px;
width: 1000px:
position: relative;
text-align: left;
background-repeat: no-repeat;
}

#contentindex{
background: #dee9e9;
position: relative;
overflow: auto;
height: 526px;
width: 720px;
padding-right: 20px;
padding-bottom: 20px;
margin-top: 10px;
margin-bottom: 10px;
}

#latestNews {
background-image: url(../images/latestNews.png);
background-repeat: no-repeat;
color: white;
position: relative;
height: 506px;
width: 237px;
float: left;
padding-top: 40px;
padding-left: 10px;
overflow: hidden;
}

#content {
background-image: url(../images/content.png);
background: #dee9e9;
position: relative;
width: 990px;
margin-top: 10px;
margin-bottom: 5px;
padding-top: 10px;
padding-left: 10px;
overflow: auto;
background-repeat: no-repeat;
clear: both;
}

#footer {
background-image: url(../images/footer.png);
height: 92px;
width: 1000px:
position: relative;
top: 0px;
text-align: left;
background-repeat: no-repeat;
}

#donate {
position: relative;
top: 170px;
left: 30px;
height: 50px;
width: 200px;
overflow: hidden;
}

[Author]

Posts