SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Location
    Arizona
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Question from a new web author

    Hey all, I've been recently getting into web authoring and one of my friends asked me to do a website for him. Now, I've been pounding books trying to absorb everything I can about XHTML/CSS/Javascript, and although I would say I have a general handling on it I still can't anticipate a lot of the bugs that occur between the different browsers.

    My friend has, as of yet, to establish a host and so I don't have the site in a place that can be viewed, but I was wondering if you folks might be able to understand by seeing the code?

    Anyways, here is the issue: The site comes up perfectly in IE7, but for some reason it does not appear properly in either Firefox or Safari. What's coming up wrong is the bottom navigation links. They display further down the page than where I would like them.

    So, without further ado, here is the code...


    <head>
    <title>Idea Graphic Design Group</title>
    <style type="text/css">

    body {
    background-color: #cccccc;
    font-family: arial, verdana, helvetica, sans-serif;
    }

    #container {
    width: 768px;
    height: 1000px;
    background-image: url(images/main.jpg);
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    }


    #news {
    position: relative;
    width: 250px;
    top: 320px;
    left: 25px;
    }

    #news h1 {
    font-family: arial, verdana, helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    text-decoration: underline;
    letter-spacing: .2em;
    }

    ul#newslist {
    list-style-image: url(images/bullet.jpg);
    list-style-type: disc;
    list-style-position: outside;
    }

    ul#newslist p {
    font-family: arial, verdana, helvetica, sans-serif;
    font-weight: normal;
    font-style: italic;
    }

    #topnav {
    position: relative;
    width: 900px;
    top: 308px;
    left: -50px;
    }

    ul#topnavlist {
    list-style: none;
    }

    ul#topnavlist li {
    display: inline;
    margin: 33px
    }

    ul#topnavlist li a {
    font-family: arial, verdana, helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    color: #000000;
    }

    #main {
    width: 300px;
    position: relative;
    top: 120px;
    left: 375px;
    }

    #main p {
    font-family: arial, verdana, helvetica, sans-serif;
    }

    #maintwo {
    width: 700px;
    position: relative;
    top: 150px;
    left: 40px;
    }


    #navfooter {
    position: relative;
    width: 550px;
    bottom: -300px;
    left: 95px;
    }

    #navfooterlist {
    list-style: none;
    }

    #navfooterlist li {
    display: inline;
    margin: 10px;
    }

    #navfooterlist li a {
    text-decoration: none;
    color: #FFFFFF;
    }

    </style>
    </head>


    Thank you all so much for taking a look at this! I hope to be able to return the favor as my experience grows

    (I had to remove the </a> do to Sitepoint forum requirements)

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are using a lot of relative offset positioning here, which often causes problems if you don't understand what it really does. Specifying a location with relative position only offsets the display of the element, while it still actually occupies its original location (and therefore taking up space there). This type of positioning is best confined to small nudges.

    We really need to see the full code rather than just the css, as we don't know what the html structure is. You can post the code using the code tags found on the menu bar in the "advanced" replay (the "Go Advanced" button). Alternately, zipping the whole page including the graphics and uploading it to a file share site will allow us to fully see your layout.

  3. #3
    SitePoint Member
    Join Date
    Jun 2008
    Location
    Arizona
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I think I got it to upload as a simple text file.

    As I worked with the CSS, I originially put it up as a fixed and also an absolute, but they never worked out the way I wanted. Does this mean I need to set it as a floated item?

    Anyways, thank you so much for your help!
    Attached Files Attached Files


Bookmarks

Posting Permissions

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