Hi all.

Thanks in advance for looking at this and giving me some feedback. Here is the link for the site as it stands at the moment.

http://www.capitalwebtec.com/clients/kls/template.htm

There are several problems with this layout as it stands. Here they are:

1. In FF the background image in the bottom content area does not render at all

2. In IE there is a blank white space at the bottom of the layout that shouldn't be there.

3. The list in the content area will not display bullets for some reason

4. The left side (yellow area) appears outside the wrapper for some reason in FF.

5. The links on the right side of the page do not use the hover color change that I have specified for some reason.

Any help you can give me with this is appreciated. I have done several all CSS layout site before and have nothad this many issues.

Thanks again,
Brian

Would be a good idea to post the HTML and CSS so people can look at it ^^.
the background shows in EI, and not in FF, and as you said, the yellow background runs out of the wrapper, i think you might of set it a height? im still new to css and without seeing your code i cant help. :<

The reason you're having problems is, you didn't name your CSS file correctly as it comes up as an error, shown here:

http://www.capitalwebtec.com/clients...tm/kls_css.css

Once you correct that, then you can go forward.

Originally Posted by hellhound121

Would be a good idea to post the HTML and CSS so people can look at it ^^.
the background shows in EI, and not in FF, and as you said, the yellow background runs out of the wrapper, i think you might of set it a height? im still new to css and without seeing your code i cant help. :<

Hit Ctrl+U or go to View -> Page Source in your browser. It shows the html source there

To find the CSS look for anything in <style> or <link type="text/css"> then copy and paste the file to the domain he gave us.

http://www.capitalwebtec.com/clients/kls/kls_css.css

----------------------------------------------------------------------------

Ok Blandis a few things I noticed right off the bat within your html. Take a look at your navigation system. You added:

[code]
<ul margin: 0px; class="menu">
[/code]

Two ways to fix this, either add it in your css as:

ul.menu { margin: 0; }

The above code states that any <ul> tag that has class menu give them all a margin of 0.
Say you gave your ul an id instead like:

<ul id="navbar">

Then you would put this in your css instead:

ul#navbar { margin: 0; }

<ul style="margin: 0;" class="menu">

If you want all your <ul>'s to have no margin you can put this in the css file:

ul { margin: 0; }

You can leave out the "px" after the 0, since either way its nothing. (I know its only 4 bytes of space...but hey it adds up!)


Now that I have looked through all of your html, you do this quite frequently. You must add a style="" in order to do this you can't just add it in there. Im not sure if you are using XSL/XML to form the page but this is incorrect html syntax. A list below of all the occurences you should fix:

<div id="leftside" text-align:left;> 

<ul margin: 0px; class="leftnav">

<ul margin: 0px; class="bodytext">

It looks like you add margin: 0; all over the page for your <ul>'s so my suggestion is to put: ul { margin: 0 } somewhere in your css. I usually define what I call those as global tags at the very top of my css in case I need to go back and change them later. By global tags I mean things that will effect every single thing having to do with that tag, for example: body, img, a, etc.

1. The reason your bg image isn't showing up is because there is nothing there. If you add a border to #content you can see that it "says" there is nothing to #content. Not sure what to do to fix this as of yet, just caught it.