Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Title image and other CSS issues- please help

It seems this should be an easy problem...

12:20 pm on Mar 26, 2009 (gmt 0)

5+ Year Member

Hi everyone,

New to this forum, fairly new to HTML, and very new to CSS.

Just inherited a fairly poor website, based of divs, with the job of sprucing it up. I've introduced stylesheets, and made it look nicer, but I'm trying to make the whole thing run a lot more smoothly from a coding point of view.

Currently, there are three divs, mainimage, right, and left. Mainimage is the site logo, left is the table of links to navigate the website, and right is the main content. At the moment, you go to the main site, and click on a link from the table, and the content of that page is loaded up in the right div (i.e. without changing the url).

I have initialised the divs in the CSS, but the content for mainimage and left (which never change) are defined in index.html. I'd like the move the code for these into the CSS just to tidy things up, but it doesn't seem to be working, no matter how I try it.

At the moment, I'm just trying mainimage, which will be simpler as it's just a static image. Here's the CSS at the mo:

<style type="text/css">

A:link {color:black; text-decoration: none; font-weight:underlineone; }
A:visited {color:black; text-decoration: none; font-weight:none; }
A:active {color:black; text-decoration: none; font-weight:none; }
A:hover {color:white; background:black; }

font-family: tahoma;
color: black;
font-size: 12px;

scrollbar-face-color: black;
scrollbar-3dlight-color: black;
scrollbar-highlight-color: white;
scrollbar-darkshadow-color: black;
scrollbar-shadow-color: white;
scrollbar-arrow-color: white;
scrollbar-track-color: white;}

{ position: absolute;
top: 0px;
left: 0px;
background-image: url(../images/ccpheader.jpg);

{ background-color: transparent;
position: absolute;
top: 150px;
left: 20px;}

{ background-color: transparent;
position: absolute;
top: 150px;
left: 190px;}


Can anyone tell me why this isn't working? [This would be a lot easier if links were allowed XD]

2:03 pm on Mar 26, 2009 (gmt 0)

10+ Year Member

Any CSS embedded into the HTML will override anything in your CSS files/style block, i'm assuming this is your scenario.

Firstly i would strip out all embedded CSS from your HTML tags and work with a 'clean' sheet so to speak, then try including your CSS file and see if the styles are being picked up as required.

A snippet of the HTML code would help here.

2:55 pm on Mar 26, 2009 (gmt 0)

5+ Year Member

I can't find any CSS in the HTML (it's hard to get a snippet, as I'm trying lots of things at once XD), but I'm definite that <div class=mainimage> is never referenced. Would this be a reason for it not appearing?
3:23 pm on Mar 26, 2009 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

A:link {color:black; text-decoration: none; font-weight:underlineone; }

I'm no CSS "guru," but first off what is underlineone? Valid font weights are numeric or "bold, normal," etc.

An invalid selector can sometimes bork the whole style sheet, may not be the case but when in doubt:

Validate the page [validator.w3.org]
Validate the CSS [jigsaw.w3.org]

Note that this requires a valid full doctype [webmasterworld.com]. Validation IMO is the first step to cross browser compatibility, a benchmark by which you can determine that it's not something invalid in your code breaking the layout.

The next thing that catches my eye:

<div class=mainimage>

Validation will (most likely?) warn you that these attributes need to be quoted:

<div class="mainimage">

Depending whether you are rendering in Quirks or Standards mode can determine whether your selectors will or will not apply (in some cases, not all. I think that's one of the reasons they call it "Quirks mode.")


{ position: absolute;
top: 0px;
left: 0px;
background-image: url(../images/ccpheader.jpg);

the bolded infers you have a structure like this:


so your link in the head should be

<link rel="stylesheet" type="text/css" href="some-directory/mycss.css">

Just verify this is the case.

As PSWorx requested: the relevant HTML may be the problem, so you might post a snippet of that to see how it's being referenced.


Featured Threads

Hot Threads This Week

Hot Threads This Month