Jump to content

problem with width(ie)


Ninjakreborn

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?
Link to comment
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?
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.