Jump to content

Archived

This topic is now archived and is closed to further replies.

Ninjakreborn

problem with width(ie)

Recommended Posts

Based on my original css knowledge, it went up almost 85 percent, within the past 4-5 day's.  I got a subscription online to safari books, infinite reading, permanent resources. At this point after reading over halfway through css the missing manual, I have learnt a lot.  I started learning how to do shorthand, decendent selector's, making coding quicker, faster, and more cross browser compatible.  Atleast 45 percent overall of the browser problem's I use to have I found out are easy to overcome with knowledge.

I ran into one problem I was unable to figure out.  I was reworking a lot of the css on my website
www.freelancebusinessman.com starting with getting it looking like the original template, and frmo there making modifications based on advice from critique.  Right now I redid a lot of the coding, to match what I had learnt, making it more readable, and better looking, and actually better functioning and easier to mantain. A this point, when I was redoing part of the css for the logo, I decreased the width and height, and got it almost perfect, I redid the css for the footer nav, and made it a lot better looking. At this point I have the footer set to a height of pixel's.  It looks perfect(almost 99% like I want it in firefox and opera, but in internet explorer, it's not showing the right height.  I also learnt about the thing where sometimes margins, or padding I Don't remember can either 1. collapse, or 2 get combines, that helped most of my issue's I was having, this one isn't seem to be related to that.  any advice


[code]body { /* Body Styles */
margin:0px;
padding:0px;
background-color:#FFFFFF;
color:#000000;
}

#header {
width:100%;
background-color:#f2faf5;
color:#000000;
height:25%;
float:left;
}

#leftnav {
float:left;
width:19%;
height:75%;
background-color:#f2faf5;
color:#000000;
overflow:visible;
}
/* left nav links */
#leftnav ul {
padding-left:5px;
list-style:none;
}

#leftnav a:link {
background-color:#f2faf5;
color:#006600;
}

#leftnav a:visited {
background-color:#f2faf5;
color:#333300;
}

#leftnav a:hover {
background-color:#f2faf5;
color:#003300;
}

#rightcontent {
background-color:#FFFFFF;
color:#000000;
height:50%;
width:70%;
float:left;
}

#footer {
background: url(../images/bottombar.gif) repeat #FFFFFF;
color:#FFFFFF;
width:99.3%;
height:29px;
text-align:right;
float:left;
border-left: medium solid #cccccc;
border-right: medium solid #cccccc;
border-top: thick solid #cccccc;
border-bottom: thick solid #cccccc;
}

/* footer links */
#footer ul {
list-style-type:none;
margin-top: 2px;
}

#footer li {
display:inline;
}

#footer a:link {
color:#FFFFFF;
}

#footer a:visited {
color:#666666;
}

#footer a:hover {
color:#CCCCCC;
}
/* Quick styles */
.bold { /* Specific text in left nav that needs bolded */
font-weight:bold;
font-size:0.9em;
}

h1, h2, h3, h4, h5, h6 {
background-color: #f2faf5;
color: #000000;
font-family: "Courier New", Courier, monospace;
}

/* Style related to links spread throughout pages */
.links {
list-style:none;
}

.links a:link {
background-color:#FFFFFF;
color:#006600;
}

.links a:visited {
background-color:#FFFFFF;
color:#333300;
}

.links a:hover {
background-color:#FFFFFF;
color:#003300;
}

.links2 a:link {
background-color:#FFFFFF;
color:#006600;
}

.links2 a:visited {
background-color:#FFFFFF;
color:#333300;
}

.links2 a:hover {
background-color:#FFFFFF;
color:#003300;
}

/* For displaying code */
.specialtext {
font-size:12px;
background-color:#999999;
}
/* End displaying code */[/code]

Edit - also I noticed my left nav, doesn't go down all the way to the footer, I need the actual background color, and border I am going to create to go all the way down to the foot of the page, is there a way to do this with css?
if so how?

Share this post


Link to post
Share on other sites
For the 2nd problem I found out it's called
Equal Height CSS Columns
I don't understand a way to do this without something tricky.  So far I have been able to get things under control.  But these 2 problems are still bugging me, for one does anyone know of a way to fix this.  To make them equal just using CSS, with no background images.  Because currently I have it with a background color, I am going to add a border as well, but I was wondering if there's  a way to make it extend down to the footer?

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.