Grow your CSS skills. Land your dream job.

Need Help please!

  • # May 22, 2009 at 3:30 pm

    Ok im gonna list my code after i explain my problem, first everything works fine in IE only thing i can do, is figure out why i cant center my navigation its to the left of the the width in center of page is 765 instead of being centered inside its to the left of it, but not agenst the browser window just in the container i try to add like a spacer image and nothing is working it will not move over something i try dont even do anything other bump it down a line which makes the backround not line up..

    2nd problem is nothing work in firefox the header is ok the body bg is ok, the navigation one ONE buton shows up the news button hover work good but only has one button and in the content the side bar is overlapping the main conent and all the way to the left of container.

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">




    Origins

    Tim Berners-LeeIn 1980, physicist Tim Berners-Lee, who was an independent contractor at CERN, proposed and prototyped ENQUIRE,
    a system for CERN researchers to use and share documents. In 1989, Berners-Lee and CERN data systems engineer Robert Cailliau
    each submitted separate proposals for an Internet-based hypertext system providing similar functionality. The following year,
    they collaborated on a joint proposal, the WorldWideWeb (W3) project,[1] which was accepted by CERN.

    [edit] First specifications

    The first publicly available description of HTML was a document called HTML Tags, first mentioned on the Internet by Berners-Lee in late 1991.[2][3] It describes 22 elements comprising the initial, relatively simple design of HTML. Thirteen of these elements still exist in HTML 4.[4] HTML is a text and image formatting language used by internet browsers to dynamically format web pages. The semantics of many of its tags can be traced to early text formatting languages such as runoff. Runoff was developed in the early 1960s for the CTSS (Compatible Time-Sharing System) operating system, and its formatting commands were derived from the commands used by typesetters to manually format documents. Runoff was later incorporated into the UNIX operating system in more advanced formatting programs such as roff, nroff, and troff.
    Berners-Lee considered HTML to be, at the time, an application of SGML, but it was not formally defined as such until the mid-1993 publication, by the IETF, of the first proposal for an HTML specification: Berners-Lee and Dan Connolly’s “Hypertext Markup Language (HTML)” Internet-Draft, which included an SGML Document Type Definition to define the grammar.[5] The draft expired after six months, but was notable for its acknowledgment of the NCSA Mosaic browser’s custom tag for embedding in-line images, reflecting the IETF’s philosophy of basing standards on successful prototypes.[6] Similarly, Dave Raggett’s competing Internet-Draft, “HTML+ (Hypertext Markup Format)”, from late 1993, suggested standardizing already-implemented features like tables and fill-out forms.[7]
    After the HTML and HTML+ drafts expired in early 1994, the IETF created an HTML Working Group, which in 1995 completed “HTML 2.0″, the first HTML specification intended to be treated as a standard against which future implementations should be based.[6] Published as Request for Comments 1866, HTML 2.0 included ideas from the HTML and HTML+ drafts.[8] There was no “HTML 1.0″; the 2.0 designation was intended to distinguish the new edition from previous drafts.[9]
    Further development under the auspices of the IETF was stalled by competing interests. Since 1996, the HTML specifications have been maintained, with input from commercial software vendors, by the World Wide Web Consortium (W3C).[10] However, in 2000, HTML also became an international standard (ISO/IEC 15445:2000). The last HTML specification published by the W3C is the HTML 4.01 Recommendation, published in late 1999. Its issues and errors were last acknowledged by errata published in 2001.


    HTML CODE:

    CSS Code:

    Code:
    /*
    AUTHOR: Chris Cardarello

    http://www.moppieillusions.com
    admin@moppieillusions.com
    quickfire84@gmail.com

    */

    /*reset an basic setup*/

    *{margin: 0px; padding: 0px;}
    html {overflow-y: scroll;}

    body {
    font-size: 62.5%;
    font-family: Arial;
    background: url(images/topbg.png) repeat-x top #FFFFFF;
    }

    ul{list-style: none;}
    p{font-size: 1.2em;}
    a{outline: none;}
    a img {border: none;}
    /*end reset*/

    /*toolbox*/
    .clear{clear: both;}
    .floatleft{ float: left;}
    .floatright{ float: right;}

    /*page wrap settings*/
    div#page-wrap{
    width: 765px;
    margin:0 auto;
    }

    /*header settings*/
    div#header{
    width:765px;
    height:137px;
    border: none;
    background: url(images/headerbg.jpg) center top no-repeat;
    }

    /*spacer between nav & content*/

    div#spacer{
    height: 40px;
    }

    /*main content*/
    div#content{
    width:490px;
    float: left;
    }
    div#content.sidecontent{
    padding-left: 4px;
    }

    /*sidebar settings*/
    div#sidebar{
    width: 245px;
    float: right;
    position: absolute; top right;
    padding: 0px 18px 4px 4px;
    }

    /*navigation system start*/

    ul#nav {
    list-style: none;
    }
    ul#nav li{
    width: 785px;
    display: inline;
    }
    ul#nav li a{
    display: block;
    height: 44px;
    text-indent: -9999px;
    float: left;
    }
    ul#nav li.news a {
    width:75px;
    background: url(images/newsbutton.jpg) bottom center no-repeat;
    }
    }
    ul#nav li.about a {
    width:106px;
    background: url(images/aboutusbutton.jpg) bottom center no-repeat;
    }
    }
    ul#nav li.services a {
    width:90px;
    background: url(images/servicesbutton.jpg) bottom center no-repeat;
    }
    }
    ul#nav li.portfolio a {
    width:99px;
    background: url(images/portfoliobutton.jpg) bottom center no-repeat;
    }
    }
    ul#nav li.quote a {
    width:101px;
    background: url(images/getquotebutton.jpg) bottom center no-repeat;
    }
    }
    ul#nav li.contacts a {
    width:98px;
    background: url(images/contactsbutton.jpg) bottom center no-repeat;
    }
    ul#nav li a:hover{
    background-position: top center;
    }

    /*end of navigation system*/

    /*footer settings*/
    div#footer {
    background: url(images/footerbg.jpg) repeat-x bottom;
    height: 150px;
    color: black;
    padding: 30px 0 0 0;
    text-transform: uppercase;
    text-align: center ;
    position: relative bottom;
    font-weight: bold;
    }
    div#footer p.copyright{
    position: relative; bottom: -95px;
    }

    /* end foot settings*/

    # May 22, 2009 at 3:41 pm

    Wholllly beans. I’m more confused than a penguin in Florida.

    "quickfire84" wrote:
    Ok im gonna list my code after i explain my problem, first everything works fine in IE only thing i can do, is figure out why i cant center my navigation its to the left of the the width in center of page is 765 instead of being centered inside its to the left of it, but not agenst the browser window just in the container i try to add like a spacer image and nothing is working it will not move over something i try dont even do anything other bump it down a line which makes the backround not line up..

    That is the longest sentence I’ve ever seen. I have no idea what you’re trying to say.
    Your HTML/CSS commenting is great, but no idea what the problem is. Can you try writing one concise sentence at a time?

    # May 22, 2009 at 3:49 pm

    A link would be even better.

    Like Ashton I have no idea what you are trying to say, but after having had a quick look at your code two things stand out immediately.
    First. If you are using empty divs to space things out you are doing something seriously wrong. That’s what margins and padding are for.

    Secondly.

    Code:
    ul#nav li{
    width: 785px;
    display: inline;
    }

    That’s one hell of a big list item!

    # May 22, 2009 at 5:21 pm

    Sorry, what im trying to say is if you look at my navigation its not centered its to the left, i try”d to put a pad in there with a image and such but nothing works, and if viewed in FireFox only the news button shows up the rest of them disapear, and the float sidebar overlaps the maincontent but on in firefox.

    http://moppieillusions.com/demowork/miv3/

    my first post has all codeing for index.html and style.css

    # May 22, 2009 at 11:50 pm

    Thanks for the link!

    Yes, cool design, CSS is definitely broken. Did you happen to read this?

    "apostrophe" wrote:
    Code:
    ul#nav li{
    width: 785px;
    display: inline;
    }

    That’s one hell of a big list item!

    You are telling each <li> to be 785px wide, and you have 7 <li>s so only one can fit on the line:

    Code:
  • News
  • About Us
  • Services
  • Portfolio
  • Get Quote
  • Contacts

I recommend changing width to 100px for starters.

I would also validate your HTML: http://validator.w3.org/check?verbose=1 … %2Fmiv3%2F

Let us know how that works.

# May 23, 2009 at 12:46 am

Ok so i try’d to edit that width from 20px to500px and looked at it, and it doesnt seem to change anthing on IE or FireFox IE sill has prblem with un-centered nav and FireFox doesnt show the nav shows all of one button rest of them are gone. And my floated left main conent is fine but my floated right sidebar in FireFox goes from being on the right side of main content to overlaping it all the way to the left.. in IE the sidebar is fine… any ideas?? Oh an i cant seem to put a few px’s of padding between the sibar picture and the text that wraps around it its sapced on bottom but not on right side…

thanks

# May 23, 2009 at 1:16 am
"AshtonSanders" wrote:
"apostrophe" wrote:
Code:
ul#nav li{
width: 785px;
display: inline;
}

That’s one hell of a big list item!

<snip>

I recommend changing width to 100px for starters.

"quickfire84" wrote:
Ok so i try’d to edit that width from 20px to500px

<jerk>WTF? Are you just spitting out random numbers?</jerk> I just checked your page again, and you didn’t change anything to the above-mentioned code.

You also missed this:

"AshtonSanders" wrote:
I would also validate your HTML: http://validator.w3.org/check?verbose=1 … %2Fmiv3%2F

<jerk>Seriously man, please at least pretend to read the replies to your post before you say it’s still broken…</jerk>

(apologies)

# May 23, 2009 at 1:20 am

Oh yea… and you haven’t applied a background image to the other buttons… so you can’t see them.

This is the only CSS code you wrote for the individual Links:

Code:
ul#nav li.news a {
background:transparent url(images/newsbutton.jpg) no-repeat scroll center bottom;
width:75px;
}

If you want the other links to show an image, you should start with applying a background image to it.

# May 23, 2009 at 1:49 am

Ok just so you know, i edit my pages none live and test in browsers before making it live i only upload so you could see it, i try 100px, the way i said it was i try’ every number from 20px to 500px insince so..

an as for your other comment if you look in my css code on my first post every button has a background if it didnt how would they show up in IE only one shows up in FF

just so you kow this is my code that was cut and paste from the original post for button:

Code:
ul#nav li.news a {
width:75px;
background: url(images/newsbutton.jpg) bottom center no-repeat;
}
}
ul#nav li.about a {
width:106px;
background: url(images/aboutusbutton.jpg) bottom center no-repeat;
}
}
ul#nav li.services a {
width:90px;
background: url(images/servicesbutton.jpg) bottom center no-repeat;
}
}
ul#nav li.portfolio a {
width:99px;
background: url(images/portfoliobutton.jpg) bottom center no-repeat;
}
}
ul#nav li.quote a {
width:101px;
background: url(images/getquotebutton.jpg) bottom center no-repeat;
}
}
ul#nav li.contacts a {
width:98px;
background: url(images/contactsbutton.jpg) bottom center no-repeat;
}
ul#nav li a:hover{
background-position: top center;
}

/*end of navigation system*/

All i wanna know is why it is messed up in FF and onlything wrong in IE is the navigation is not centered to the headerbg…

ill try the validation… thanks

# May 23, 2009 at 2:42 am

ok did the validate thing fix minor errors like missing some = and stuff

it passes now:

This document was Tentatively checked as HTML 4.01 Transitional

No the buttons show up on FF but content still over laps

but now in IE everything is shuved left agenst the browser instead of being center and its in a page wrap so… i dunno.

# May 23, 2009 at 2:49 am
Quote:
Ok just so you know, i edit my pages none live and test in browsers before making it live i only upload so you could see it, i try 100px, the way i said it was i try’ every number from 20px to 500px insince so..

Can’t really help you if you are looking at a different page to the rest of us.

# May 23, 2009 at 2:57 am

Super Strange. Last time I looked at the Style Sheet, there was only one background image there…

Here’s your problem:
http://jigsaw.w3.org/css-validator/vali … %2Fmiv3%2F

Btw: To center your content in Internet Explorer:

Add "text-align:center" to the body css
Add "text-align:left" to the #page_wrap css

Enjoy,

# May 24, 2009 at 10:42 am

Ok i got everything in IE fix’d back to center, all the nav button show up in FF now only problem i have is still the left colum will not stay floated right in FF and overlaps main conent on the very left of the main content, is there something special i need to put in for FF to be able to make it stay right?

New CSS Code:

Code:
* {
margin : 0;
padding : 0;
}

/*page background(top)*/
body {
text-align:center;
font-size : 62.5%;
font-family : Arial;
background : #ffffff url(images/topbg.png) repeat-x top;
}

/*misc settings*/
ul {list-style : none;}
p {font-size : 1.2em;}
a {outline : none;}
a img {border : none;}
.clear {clear : both;}
.floatleft {float : left;}
.floatright {float : right;}

/*page wrap*/
div#page-wrap {width: 765px; margin: 0 auto; text-align: left;}

/*header settings*/
div#header {
width : 765px;
height : 137px;
border : none;
background : url(images/headerbg.jpg) no-repeat center top;
}

/*spacer (provides space between header an content)*/
div#spacer {height : 40px;}

/*main content*/
div#content {width : 490px; float : left;}

/*side content padding*/
div#content.sidecontent {padding-left: 4px;}

/* side bar settings*/
div#sidebar {
width : 245px;
float : right;
position : absolute;
padding : 0 18px 4px 4px;
}

/*navigation system */
ul#nav {list-style: none;}

ul#nav li {
width : 30px;
display : inline;
}

ul#nav li a {
display : block;
height : 44px;
text-indent : -9999px;
float : left;
}

/* navigation buttons */
ul#nav li.news a {
width : 75px;
background : url(images/newsbutton.jpg) no-repeat bottom center;
}

ul#nav li.about a {
width : 106px;
background : url(images/aboutusbutton.jpg) no-repeat bottom center;
}

ul#nav li.services a {
width : 90px;
background : url(images/servicesbutton.jpg) no-repeat bottom center;
}

ul#nav li.portfolio a {
width : 99px;
background : url(images/portfoliobutton.jpg) no-repeat bottom center;
}

ul#nav li.quote a {
width : 101px;
background : url(images/getquotebutton.jpg) no-repeat bottom center;
}

ul#nav li.contacts a {
width : 98px;
background : url(images/contactsbutton.jpg) no-repeat bottom center;
}

/*navigation hover*/
ul#nav li a:hover {
background-position : top center;
}

/*foot settings*/
div#footer {
background : url(images/footerbg.jpg) repeat-x bottom;
height : 150px;
color : black;
padding : 30px 0 0 0;
text-transform : uppercase;
text-align : center;
font-weight : bold;
}
div#footer p.copyright {
position : relative;
bottom : -95px;
}

# May 24, 2009 at 11:26 am

Remove position:absolute from #sidebar.

# May 24, 2009 at 12:52 pm

Thank You, everything works now in both..

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".