Member Avatar for Dannis86

Hello there, I'm watching a video from designcourse.com and just trying out with my own website. I got this far with html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="container">
    <p id="logo"><a href="http://funnymash.com">FUNNY MASH</a></p>
    <ul id="top-nav">
    <li id="home"><a href="http://funnymash.com">Home</a></li>
    <li id="about"><a href="">About</a></li>
    <li id="blog"><a href="">Blog</a></li>
    <li id="photos"><a href="">Photos</a></li>
    <li id="forum"><a href="">Forum</a></li>
    <li id="fb"><a href="http://www.facebook.com/pages/FunnyMASHcom/138795476197243">FB</a></li>
    <li id="twitter"><a href="https://twitter.com/#!/WebFunnyMash">Twitter</a></li>
    </ul>
    </div>
    <div class="clear"></div>
    <div id="content">
	
    </div>
</body>

</html>

And this is my css

@charset "utf-8";
/* CSS Document */

*{font-family:arial,helvetica,sans-serif,tahoma,verdana,geneva,lucida,"lucida grande";}

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { 
margin: 0; padding: 0; outline: none; color:#eeece8; 
}

body { 
	font: 9pt/17pt arial; 
	height: 100%;
	background-color: #eeece8;
	outline: none;
	}
	
.clear { 
	clear: both;
}
	
a { color: #52686f; text-decoration: none; outline: none; }

#container {
	display: block;
	margin: 0 auto;
	width: 957px;
}

p#logo {
	width: 511px;
	height: 57px;
	display: inline;
	float: left;
	background: url(../images/logo.png);
	margin-top: 14px;
}

p#logo a {
	width: 511px;
	height: 57px;
	display: block;
	text-indent: -5000px;
}

ul#top-nav {
	list-style-type:none;
	float:right;
	display:inline;
}

ul#top-nav li {
	display:inline;
	float:left;
	margin: 33px 20px 0 0;
	height:18px;
}

ul#top-nav li a {
	text-indent: -5000px;
	display: block;
	height:18px;
	
}

ul#top-nav li#home {
	background: url(../images/button-home.png) no repeat;
	width:44px;
}

ul#top-nav li#home a {
	width:44px;
}

ul#top-nav li#about {
	background: url(../images/button-about.png) no repeat;
	width:44px;
}

ul#top-nav li#about a {
	width:44px;
}

ul#top-nav li#blog {
	background: url(../images/button-blog.png) no repeat;
	width:38px;
}

ul#top-nav li#blog a {
	width:38px;
}

ul#top-nav li#photos {
	background: url(../images/button-photos.png) no repeat;
	width:52px;
}

ul#top-nav li#photos a {
	width:52px;
}


ul#top-nav li#forum {
	background: url(../images/button-forum.png) no repeat;
	width:46px;
}

ul#top-nav li#forum a {
	width:46px;
}


ul#top-nav li#fb {
	background: url(../images/button-fb.png) no repeat;
	width:25px;
}

ul#top-nav li#fb a {
	width:25px;
}

ul#top-nav li#twitter {
	background: url(../images/button-twitter.png) no repeat;
	width:50px;
}

ul#top-nav li#twitter a {
	width:50px;
}

Here is the website I tried it on:

The buttons are not showing, I do not know why.
In dreamweaver the buttons DO show, but in all browsers they do not show..

  • 3 Contributors
  • 7 Replies
  • 193 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by matricol

Dani AI

Generated

A tiny syntax slip in the stylesheet was the actual cause here — the background rule wasn't being parsed by browsers, so the list items never got their images even though Dreamweaver's preview showed them. spotted that small parsing problem, and confirms fixing it made the buttons appear. Dreamweaver can be forgiving; always verify behavior in real browsers.

Quick checklist for the next time this happens:

  • Inspect the element with your browser dev tools (Styles / Computed) to see whether a background-image value is present or the rule is ignored.
  • Watch the Network panel for 404s when the page loads; missing image files or wrong paths show up there immediately.
  • Remember CSS file paths are relative to the stylesheet, not the HTML file. Also check filename case on the web server (Linux hosts are case-sensitive).
  • Clear the browser cache or do a hard reload after changes — stale CSS is a common false alarm.
  • Run the CSS validator or look for earlier parse errors in the stylesheet; a single syntax error can invalidate later rules.

A couple of maintainability notes: hiding link text with very large negative text-indent or using images purely as CSS backgrounds can hurt accessibility and make content harder to maintain. Consider using an accessible visually-hidden pattern or an inline image with alt text when the graphic conveys meaning. For layout choices like pixel widths, weigh fixed pixels against flexible units depending on your target audience and responsive needs.

Using Firebug/Chrome DevTools (as suggested) is the fastest way to see the real problem: you can confirm whether the browser loaded the image, view the exact CSS rule the browser used, and capture any network errors. Those three bits of information usually point straight to the fix.

Recommended Answers

All 7 Replies

Member Avatar for almostbob

ul#top-nav li#home { background: url(../images/button-home.png) no repeat; width:44px; wrong

ul#top-nav li#home { background: url('../images/button-home.png') no-repeat; width:44px; }

don't use px, no fixed measurements, creates problems--makes the page push offscreen (creates horizontal scroll bars, users do not scroll sideways, mice do not have hscroll wheels, users leave), on small displays
--makes the page sit as a strange looking central column in the middle of a wasteland of empty screen on large displays, in any other resolution/window size/screen size than what it was originally laid out on
pixels are generally only used for images
current best practice, layout is em or %, relative dimensions that auto-adjust to user preference screen size window size
and wont become smaller each time a new monitor standard is reached and the pixel mask gets smaller

these standard test beds may assist you-- replace yoursite.com with your uri

http://analyze.websiteoptimization.com/authenticate.php?url=http://www.yoursite.com&/ Speed

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.yoursite.com&charset=%28detect+automatically%29&doctype=Inline&group=0 html

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.yoursite.com&profile=css21&usermedium=all&warning=1&lang=en CSS

handheld

other browsers

many problems (if present) will show serious code errors in the w3c validator sites will produce blankscreens in browsershots
Valid code does not ensure the site will work ...
Invalid code ensures the site will not work ...
.. in all browser OS combinations

not all layouts work in handheld devices
strictly code based,

Edited by almostbob because: n/a
Member Avatar for Dannis86

Still no buttons
CSS is this now:

@charset "utf-8";
/* CSS Document */
 
*{font-family:arial,helvetica,sans-serif,tahoma,verdana,geneva,lucida,"lucida grande";}
 
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { 
margin: 0; padding: 0; outline: none; color:#eeece8; 
}
 
body { 
	font: 9pt/17pt arial; 
	height: 100%;
	background-color: #eeece8;
	outline: none;
	}
 
.clear { 
	clear: both;
}
 
a { color: #52686f; text-decoration: none; outline: none; }
 
#container {
	display: block;
	margin: 0 auto;
	width: 957px;
}
 
p#logo {
	width: 511px;
	height: 57px;
	display: inline;
	float: left;
	background: url(../images/logo.png);
	margin-top: 14px;
}
 
p#logo a {
	width: 511px;
	height: 57px;
	display: block;
	text-indent: -5000px;
}
 
ul#top-nav {
	list-style-type:none;
	float:right;
	display:inline;
}
 
ul#top-nav li {
	display:inline;
	float:left;
	margin: 33px 20px 0 0;
	height:18px;
}
 
ul#top-nav li a {
	text-indent: -5000px;
	display: block;
	height:18px;
 
}
 
ul#top-nav li#home {
	background: url('../images/home.png') no repeat;
	width:44px;
}
 
ul#top-nav li#home a {
	width:44px;
}
 
ul#top-nav li#about {
	background: url('../images/about.png') no repeat;
	width:44px;
}
 
ul#top-nav li#about a {
	width:44px;
}
 
ul#top-nav li#blog {
	background: url('../images/blog.png') no repeat;
	width:38px;
}
 
ul#top-nav li#blog a {
	width:38px;
}
 
ul#top-nav li#photos {
	background: url('../images/photos.png') no repeat;
	width:52px;
}
 
ul#top-nav li#photos a {
	width:52px;
}
 
 
ul#top-nav li#forum {
	background: url('../images/forum.png') no repeat;
	width:46px;
}
 
ul#top-nav li#forum a {
	width:46px;
}
 
 
ul#top-nav li#fb {
	background: url('../images/fb.png') no repeat;
	width:25px;
}
 
ul#top-nav li#fb a {
	width:25px;
}
 
ul#top-nav li#twitter {
	background: url('../images/twitter.png') no repeat;
	width:50px;
}
 
ul#top-nav li#twitter a {
	width:50px;
}

And yes I changed all my files on my server to about.png - blog.png - fb.png - home.png - forum.png - photos.png - twitter.png

Member Avatar for almostbob

no-repeat

one word hyphenated

Member Avatar for Dannis86

Such a small thing that can make me cry :(. Many thanks for helping me out!
Next time i'll look more closely haha.

Member Avatar for almostbob

all the instruction pages "css background properties" et al, use a tiney<--spelled wrong i think--< size hyphen dash, cant see it
ya couldnt see mine till it was bold red either

Edited by almostbob because: n/a
Member Avatar for matricol

thats not a big deal ... try firebug in fireworks and see whad code is good and whats not showing

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.