Boagworld - question about css

question about css

icemancast — Sun, 22 Oct 2006 15:24:59 -0700

hey guys i have designed websites with tables and really fast at it. i am doing the switch to css design ( thanks to boags podcast ). i am having some trouble and am wondering if someone can help. the site is The site

view css:
Main Css
Design Css

firefox shows menu fine
ie 6 shows space for second menu

please don't mind green it is just to show me boundaries. i am sure padding and margins are all set to zero but seems like i missed one and i don't know where it is. please if you can answer that would be great. also if you have any browser bug reference sites that would be great.

isaac

"Plans fail for lack of counsel, but with many advisors they succeed."

question about css

PaulH — Sun, 22 Oct 2006 16:34:25 -0700

I don't quite understand what you are asking. If you are asking what I think you are asking then try changing the img CSS to this:

img {
border: 0;
vertical-align: bottom;
}

Without vertical aligning images they often have a 3 pixel space below them.

question about css

icemancast — Sun, 22 Oct 2006 16:49:40 -0700

sorry.. if you see the lime green there is a space between menu 1 and menu 2 ( bottom menu ) in ie 6... but not in firefox... i added the vertical-align: bottom ( already had the border: 0) and there is still a space there and i don't knwo where it is coming from... thanks for your fast reply

isaac

question about css

icemancast — Sun, 22 Oct 2006 16:54:44 -0700

also firefox does fine and ie6 renders and extra " 4 " for link 4...

question about css

PaulH — Sun, 22 Oct 2006 18:30:14 -0700

I think this design needs a rethink. You seem to be using several images for the header and the rest looks like a jigsaw puzzle with bits fitting in here and there. Did you use tools to automatically make the code or something?

question about css

PaulH — Sun, 22 Oct 2006 18:37:15 -0700

There are plenty of bugs like that with IE, things appearing twice and things dissappearing for no reason.

For padding and margin, I often use this style to remove them for all elements:

* {
margin: 0;
padding: 0;
}

You may want to look at Listamatic for some examples of using lists for navigation and build your lists from scratch.

question about css

icemancast — Mon, 23 Oct 2006 03:13:14 -0700

everything is from scratch... i am really shooting off the hip. i don't know the first step... tables i could have whipped this out. should i use one full image for the header. how should i think of design. top to bottom left to right. i know php and mysql... but css is new to me.

the design old design in tables is: old but current site

question about css

icemancast — Mon, 23 Oct 2006 03:30:59 -0700

this is what i want finish product to look like

Click Here

if i am cutting images wrong please suggest a better way if you can...

isaac

question about css

richquick — Mon, 23 Oct 2006 03:37:57 -0700

should i use one full image for the header.

You should use one full image but NOT an >img< tag. Apply the image to a div as a background iamge, using CSS.

Only use the >img< tag if the image is part of the content, as opposed to being there for decoration.

Things like product images should probably be >img< tags, as tehy're more than mere decoration - they convey information (ie this is what the product looks like) - but your header should be a background image, applied to a div or other tag using CSS.

how should i think of design. top to bottom left to right.

Think of it like a russian doll or an onion skin.

Start from the outside and peel away the layers.

The first thing to sort out is the >body< tag - make sure you set the margin to zero and set the background you want.

Then, write a div, with and ID of "wrapper" which will hold the whole of the design you did in Photoshop.

Then, starting at the top, create the main sections of the page using divs. Eg, for a typical page (2-column layout with horizontal nav):

header

main nav

main content

sidebar

footer

In this case, you'd float the main conent right and the sidebar left. You'd also need to "clear" the footer using:

#footer{
  clear: both;
}

Once you've got these broad strokes mapped out, test them in Firefox (and IE - but always use Firefox first and then bugfix in IE).

Don't move on until you've got it looking right in all the browsers you're developing for - one problem is easy to fix, 100 problems is very very hard.

Then, you can start building up the individual elements within each of these larger containers.

Eg.

Within the header div you may just want to add a background image and make sure the height and width are right. (All things being equal, the simplest solution tends to be the best one)

Within the "nav" div you'll need to create an unordered list of links, which you use CSS to style so it's horizontal without bullet points.

and so on...

If you've ever seen Titanic then it's like the posh knives when Leonardo DiCaprio's character gets invited to dinner - start from the outside and work in (a tip from Molly, ironically).

Keep using this approach and you'll be fine.

Start from the outside and work in.

Don't move on until you've tested in every browser and bugfixed.

question about css

icemancast — Mon, 23 Oct 2006 06:24:07 -0700

this really helps thanks paulH and richquick... i will rework, and maybe post final for opinions in other section.
:)

"Plans fail for lack of counsel, but with many advisors they succeed"