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 13 of 13
  1. #1
    Senior Coder JamieR's Avatar
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    3,161
    Thanks
    0
    Thanked 5 Times in 5 Posts

    CSS Alignment Problem

    Hi
    I have a problem with a design I am designing to replace www.jamierees.co.uk. I've uploaded the new layout to www.jamierees.co.uk/newsite.

    Right - my problems:

    1) The borders look weird in Safari
    2) The navigation links should sit inside the #nav element but it sits outside of it
    3) The banner doesn't sretch the whole #banner class, bt I'm going to sort that..

    any ideas?

    Jamie.

  • #2
    dmc
    dmc is offline
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First of all i dont know safari but i have a few points.

    The first thing i notice is that you probably used an editor for the stylesheet because some things are duplicated in a class.

    1:

    #banner
    Border top set
    Border bottom set
    Border left set
    All borders set
    Border left set

    In other words the border left is set twice and you have a border: that sets all borders.

    #nav
    Background-color set twice
    margin: 0 ?
    padding: same i dont know how other browser are reading this.
    nothing set px,mm etc If something is zero just leave them away in my opion.

    #nav --> left: top: (i dont know how browser read a css and evaluate it but maybe left and top are better on the top of your class just a guess)

    .navSpec --> border-width: 0 1px (doesn't look good to me)

    a.navSpec:hover --> set twice

    I hope i'm somehow been useful

  • #3
    Senior Coder JamieR's Avatar
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    3,161
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Hi DMC, and welcome to Coding Forums.

    Thanks for the help. Most of this site I did really late in the evening using the code view of Dreameaver MX 2004. I notice now that I duplicated some items as you mentioned, which I will fix and upload again. When you scan through code fast, it's easy to miss things..well it is when your short sighted and don't bother wearing glasses.

    EDIT - I've uploaded the fixed version of my css file, with the corrections that you suggested but I still have the problems

    Anyhow, cheers.

    Jamie.
    Last edited by JamieR; 01-29-2005 at 11:15 PM.

  • #4
    dmc
    dmc is offline
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    LoL this was a hard one i almost give it up. I hope i found it cause i don't have the safari browser but firefox showed the same problem.

    So i downloaded the site and i did what i always do when i have a css html problem. I delete all the stuff i dont need. So i did. When i removed everything except the #nav and the <div> nav. And what the *****. Still the same problem.

    BUT when i removed the <ul></ul> the menu showed right.
    The il element is within the ul element and you gave the il element the inline property but its inline within the ul element.

    so just add this to you style and it looks ok in firefox.

    ul { display: inline;}

    I hope this will help

  • #5
    Senior Coder JamieR's Avatar
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    3,161
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by dmc
    ul { display: inline;}

    I hope this will help
    I have used li { display: inline;} for the <li> tags. However I will try <ul> as that is something that I have overlooked.

    Cheers.

    Jamie.

  • #6
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quick tip:

    DWMX2004 - Edit > Preferences > Css styles > then check/tick everything where it says 'Use shorthand for' - then check 'According to the settings above'.

    It's not perfect, and usually involves a wee bit of tidying up, but it helps

    Gary

  • #7
    Senior Coder JamieR's Avatar
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    3,161
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Graft-Creative
    Quick tip:

    DWMX2004 - Edit > Preferences > Css styles > then check/tick everything where it says 'Use shorthand for' - then check 'According to the settings above'.

    It's not perfect, and usually involves a wee bit of tidying up, but it helps

    Gary
    ah right Gary - cheers. I'm going to use Homesite and Golive more from now on, DWMX04 has been annoying me big time.

    Anyhow, ul {display: inline} worked -so thanks to dmc...was something I had overlooked as I had already inserted li {display: inline}

    Jamie.

  • #8
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Only 45 posts off joining you in addiction, so I may as well chip in again

    I know it's not a site review, but anyway - it looks good so far, I would lose the borders around the list items in the nav though, or do something more interesting with them, at the moment they sort of give the impression that there's a missing image or something.......?

    DW: been using it so long, it seems like a well worn pair of slippers to me now (bang goes any credibility I had ) Not sure GoLive is a better option really - but as far as nice hand coding environments look, well - homesite looks pretty keen.

    Looking good though J - keep us updated

    Gary

  • #9
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    44

  • #10
    Senior Coder JamieR's Avatar
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    3,161
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Graft-Creative
    Only 45 posts off joining you in addiction, so I may as well chip in again
    hehe...at one time you were way ahead of me


    Quote Originally Posted by Graft-Creative
    I know it's not a site review, but anyway - it looks good so far, I would lose the borders around the list items in the nav though, or do something more interesting with them, at the moment they sort of give the impression that there's a missing image or something.......?

    DW: been using it so long, it seems like a well worn pair of slippers to me now (bang goes any credibility I had ) Not sure GoLive is a better option really - but as far as nice hand coding environments look, well - homesite looks pretty keen.

    Looking good though J - keep us updated

    Gary
    Thanks for the pointers Gary - I've been wondering whether to get rid of those borders. As for the banner, that is still gotta be finished as I originally designed the site to fit the width of that banner, then increased the width of the banner and havent got round to changing the width of the banner yet.

    As for DW - I used to really love it after I moved up from Frontpage> DW 4.0 > DW 6.0 > DWMX04 but it's got boring after over 2 years of using it. I want to broaden my horizon so to speak so Homesite is a good choice for me. However DW is still as trustworthy and loyal - just I find some things like the differences in viewing between design view and firefox a bit annoying.
    Golive is a good WYSIWYG editor, and does it's job well. However I'm still learning it - that is why I want to use it more.

    My current site is totally awful. The design and colour scheme is horrid, the content is OK I suppose but there it a load of embarrasing stuff on there, unsemantic code and about 100,000 broken links

    Regards,
    Jamie.
    Last edited by JamieR; 01-30-2005 at 01:44 AM.

  • #11
    Senior Coder JamieR's Avatar
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    3,161
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Hi
    www.jamierees.co.uk/newsite/
    heh.... I gotta new problem

    In CSS I've applied text-align: center; for .DocumentSideFooterfont but the text is still being applied as text-align: left; as it is still positioning left.

    Another problem: I've applied text-align: left for .navSpec but it is still centering.

    any ideas?

    Jamie.

  • #12
    dmc
    dmc is offline
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    About the DocumentSideFooterfont it is centered and it works. But the span where the class is on isn't centered.
    You need to give the class DocumentBottomFooter text-align as well.

    But for align problem with class navSpec i don't know really. I only know when i remove the ul elemenent it aligns left.

    Tip: with alignment problems give the elements that won't align a style="border:1px solid #FFFFFF" so you can see how the element looks like.

    In your case the ul element looks weird with a border cause it isn't 100% width.

    Hope it helps

  • #13
    Senior Coder JamieR's Avatar
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    3,161
    Thanks
    0
    Thanked 5 Times in 5 Posts
    o right cheers
    I'll try that..
    Cheers.
    Jamie.


  •  

    Posting Permissions

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