Not signed in (Sign In)
A podcast and forum for those who design, develop and run websites.
Boagworld is not just a web design podcast, it is also a thriving online community. Whether you build, design or run websites there are always people here to help. Whatever your question there is sure to be somebody with the answer.
- subscribe via itunes
- subscribe via rss
- or get blog posts by email
Welcome, Guest
Want to take part in these discussions? Sign in if you have an account, or apply for one below
Vanilla 1.1.10 is a product of Lussumo. More Information: Documentation, Community Support.
-
- CommentAuthoricemancast
- CommentTimeOct 22nd 2006 edited
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." -
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. -
- CommentAuthoricemancast
- CommentTimeOct 22nd 2006
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 -
- CommentAuthoricemancast
- CommentTimeOct 22nd 2006
also firefox does fine and ie6 renders and extra " 4 " for link 4... -
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?
-
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. -
- CommentAuthoricemancast
- CommentTimeOct 23rd 2006
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 -
- CommentAuthoricemancast
- CommentTimeOct 23rd 2006
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 -
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. -
- CommentAuthoricemancast
- CommentTimeOct 23rd 2006
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"
1 to 10 of 10