...

View Full Version : CSS--display not matching



mysterybks
02-06-2007, 05:20 PM
I have used Frontpage for years. Years ago I wrote code. So, I have a decent knowledge of HTML. I don't know CSS. I got a CSS template that I'm trying to use for my business. I have been having a lot of trouble with it. I've upgraded to Expression Web.

Please look at www.fictionloverscorner.com and help me understand why the two sections at the bottom aren't lined up right. I'm using margin-top and margin-left on them.

Sometimes it'll look great on my screen and others will tell me things are overlapping. How do I stop this?

Thanks for your help.
Dawn

Excavator
02-06-2007, 05:58 PM
Hello mysterybks,
This takes out the biggest overlap problem I see:


#authormonth {
width: 222px;
float: left;

/*removed negative margin here*/
margin-top:-18px;

}


I think, even though it validates, that it's not very semantic and ordered badly. Just for example, you have the womanreading2.gif in an unecessary #girl div and it's after your divider and I don't have a clue why it's appearing where it is...other than the fact FF is not showing your divider at all?
Just constructive criticism here (and no guarantees that I'm correct either), I don't mean to insult you or anything. It just needs a little more work yet.

Excavator
02-06-2007, 06:08 PM
Hello again Dawn,
I see now why #girl is up there, you have a second entry for it in your CSS. I don't think there's anything wrong with that but it's MUCH easier to debug if all the styling is entered in one place.
Anyway, I'd avoid negative margins if at all possible. Not that they are bad either but they are just not needed here and, again, just easier to avoid unnecessary styling.

This may help the positioning of your bottom section...



#Navigating{
width: 487px;
margin-left: 133px;
/*deleted neg margin here*/
}
#Join{
/*deleted float: left;*/
width: 487px;
margin-left: 132px;
margin-top: 13px;
}

mysterybks
02-06-2007, 06:20 PM
Thanks. This is a free template I got. I have had issues with where things are placed. Not knowing CSS, I just figured I didn't understand it. Things don't seem to flow very well.

I'm wondering if it would be better to set up a page with tables and use the style coding for fonts, etc. rather than for placement.

Have a style.css document separately from the html page is normal, isn't it?

Dawn

Excavator
02-06-2007, 06:25 PM
Have a style.css document separately from the html page is normal, isn't it?
Well, any .css seperately from the html page. You can use inline styling but a linked css file is how you style multiple pages.


I'm wondering if it would be better to set up a page with tables
Just say NO to tables!
hehe, check the link in my sig below to see how I feel about tables.

mysterybks
02-06-2007, 06:27 PM
Firefox? Why? I don't have that. I just have IE6. It doesn't seem to show up the same in my IE as in others. How can I set it up right so it will show up well for all? Do you have any suggestions of where to learn lots about CSS fast?

Thanks.

Dawn

Excavator
02-06-2007, 06:32 PM
You're in the right place for all of that.
Look at the sticky topic at the top of this forum titled Sticky: HTML&CSS Documentation & References for a ton of info.
As for making your page compatible with all browsers and learning CSS, you've already started by posting here.

Excavator
02-06-2007, 06:34 PM
Oh yeah - duh!
The reason for using FireFox is it's the most Standards Compliant browser there is. When you write well formed semantic valid code, FF renders it the way it is supposed to be displayed.

scrupul0us
02-06-2007, 06:42 PM
Firefox? Why? I don't have that. I just have IE6. It doesn't seem to show up the same in my IE as in others. How can I set it up right so it will show up well for all? Do you have any suggestions of where to learn lots about CSS fast?

Thanks.

Dawn

Any project worth doing right requires a few things

-multiple browser testing... youd be surprised how you can design a really nice page for IE, but when you look at it in another browser it looks like who done it and ran... you gotta check your page in multiple browsers and versions

-frontpage and the like are horrible... if you rely strictly on an editor to create code for you then you dont "know html", you know how to use an editor... however i will say this, i used front page for years myself and learned HTML by working in the code space... right now I use dreamweaver for coding for three reasons; tabs, syntax highlighting, auto complete... aside from that its just a bloated editor IMHO

-don't use tables for layout... its easier said than done, esp if
a) you dont know CSS
b) you grew up using tables

toy around with some examples and you'll pick it up

-learning CSS will definitely improve your sites and your code... inline styling is a last case scenario and should be minimized.. clean code is manageable code

-validate all your pages
a) css (http://jigsaw.w3.org/css-validator/)
b) html (http://validator.w3.org/)

-use a valid doctype
a) doctype (http://www.w3.org/QA/Tips/Doctype)

i think that about covers the broad spectrum



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum