Blog in CSS - Help!

robfenn posted this at 13:41 — 20th November 2007.

Joined: Jun 2005

Hi Guys,

This is going to be another one of my lots of questions threads!

I want to build my photoblog in CSS, to look like this:
http://www.sixthsense-esp.co.uk/Robisms/HTML-Layout.htm

Unfortunately i've already stumbled into problems with the CSS version:
http://www.sixthsense-esp.co.uk/Robisms/Layout.htm

First off, how comes the top image border is not showing?

Also, the fact that the top line is an H1 tag seems to affect where the DIV starts in different browsers (different in Firefox, IE and Safari), is there any way round this?

Finally (for now!) i have used line height attribute to change the menu list, but again in different browsers shows different line heights! Is there a way of removing the default line height so i don't get the massive space between menu items?

Here's a link to the CSS BTW.
http://www.sixthsense-esp.co.uk/Robisms/styles/Layout.css

Many thanks!

Rob

demonhale posted this at 15:52 — 20th November 2007.

He has: 3,278 posts

Joined: May 2005

The image borders are not showing because of the css style commands that point to the classes and Id' used.

You should change the div property of photos on the css to something like this:

#photos{
margin-left: 50px;
margin-top: 25px;
margin-bottom: 22px;
width: 400px;
}

Then remove the "mg" in front of the photos class like so

.photos {
border-style:solid;
border-color: #202020;
border-top-width:6px;
border-bottom-width:0px;
border-left-width:0px;
border-right-width:0px;
}

Then edit the div.photos class to 11 px to match the original like so

DIV.photo {
margin-bottom: 11px;
}

Now you have no problems in the Images Area, just recheck the errors on your CSS to fix everything else, and yes theres a css line-height property you can use for line spacings....

demonhale posted this at 05:37 — 22nd November 2007.

He has: 3,278 posts

Joined: May 2005

I just noticed that the mg.photos should be img.photos... there are some editing errors on your css...