Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    90
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS--display not matching

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello mysterybks,
    This takes out the biggest overlap problem I see:
    Code:
    #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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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...

    Code:
    #Navigating{
        width: 487px;
        margin-left: 133px;
        /*deleted neg margin here*/
    }
    #Join{
    /*deleted float: left;*/
    width: 487px;
        margin-left: 132px;
        margin-top: 13px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Feb 2007
    Posts
    90
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Feb 2007
    Posts
    90
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Regular Coder
    Join Date
    Sep 2004
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mysterybks View Post
    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
    b) html

    -use a valid doctype
    a) doctype

    i think that about covers the broad spectrum


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •