1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Background repeat problem

Discussion in 'CSS' started by wholesalechecklist, Aug 5, 2007.

0
  1. #1
    This is the first time where IE has it right and firefox is messed up!

    Anyways, I am referring to my site www.swaythevote.com

    In firefox, the background image repeats a little after each expandable box. I am not sure why. I cannot fix it and I am not very good with css background tags. Any advice?

    The html code:
    
<div class="content">
<img src="images/divtop.jpg" width="700" height="93" border="0" alt="divtop" />
TOP ISSUES RESULTS HERE IN TEXT AND GRAPHS
<img src="images/divbottom.jpg" width="700" height="116" border="0" alt="divbottom" /></div>

<div class="content">
<img src="images/divtop2.jpg" width="700" height="93" border="0" alt="divtop2" />
<dl class="info">
<dd class="info">
<ul class="info">
<li class="info">Crime</li>
<li class="info">Economy</li>
<li class="info">Education</li>
<li class="info">Energy</li>
</ul>
</dd>
<dd class="info">
<ul class="info">
<li class="info">Environment</li>
<li class="info">Federal Budget</li>
<li class="info">Healthcare</li>
<li class="info">National Defense</li>
</ul>
</dd>
<dd class="info">
<ul class="info">
<li class="info">Social Security</li>
<li class="info">Taxes</li>
<li class="info">Terrorism</li>
<li class="info">Welfare</li>
</ul>
</dd>
</dl>
<img src="http://www.swaythevote.com/images/divbottom2.jpg" width="700" height="28" border="0" alt="divbottom2" /></div>

</div>
    Code (markup):
    The CSS:
    
.content {
	width: 700px;
	border: 0;
	background: #FFFFFF url(../images/divbg.jpg) repeat-y 50% 0;
	padding: 0px;
	margin: 0px;
	text-align: center;
}

.info dl {
  clear:both;
  width:728px;
  height:8em;
  margin: 0px auto;
}
.info dd {
  width:33%; 
  float:left; 
  margin:0 auto;
}
.info ul li {
  display: block;
  list-style-type: none;
  line-height: 30px;
}
    Code (markup):
    Thanks in advance
     
    wholesalechecklist, Aug 5, 2007 IP
  2. euler

    euler Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try this:
    HTML
    ...
<div class="content">
<img src="images/divtop.jpg" width="700" height="93" border="0" alt="divtop" />
[B][COLOR="Red"]<p>[/COLOR][/B]TOP ISSUES RESULTS HERE IN TEXT AND GRAPHS[B][COLOR="Red"]</p>[/COLOR][/B]
<img src="images/divbottom.jpg" width="700" height="116" border="0" alt="divbottom" /></div>
...
    Code (markup):
    CSS
    ...
#main {
	width: 700px;
	background-color: #000000;
	margin: 20px auto;
        [B][COLOR="Red"]line-height: 0;[/COLOR][/B]
}
...
    Code (markup):
     
    euler, Aug 5, 2007 IP
  3. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #3
    Change doctype from strict to transitional, find thefollowing line at the very top of the page:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Code (markup):
    and replace with 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Code (markup):
    This will fix the spacing problem.
     
    Clive, Aug 9, 2007 IP
  4. wholesalechecklist

    wholesalechecklist Peon

    Messages:
    511
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I thought using strict doctype ensures that your code is clean and that you have minimal browser compatibility problems? Is there another way to fix it? There has to be...
     
    wholesalechecklist, Aug 9, 2007 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Changing doctype from strict to tranny should NOT be fixing any layout issues here.

    Easing up on the redundant classes, using semantic tags PROPERLY (a DL for a menu that has no DT? /FAIL/) separation of your presentation from your content - now these are things that might help fix the layout.

    Of course, I'd also axe that STUPID malfing javascript - there's a REASON target was removed from the specification, and using a .js to get around that is ignoring the entire ******* point. Forcing a page to open in a new window is impolite and improper as you are overriding the normal behavior of the browser. (much apologizings - pet peeve)

    You should also probably be slicing up your images just a bit more than you are...

    This is probably how my HTML for that page would look:

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="2008 elections, Joe Biden, Hillary Clinton, Christopher Dodd, John Edwards, Mike Gravel, Dennis Kucinich, Barack Obama, Bill Richardson, Sam Brownback, Rudy Giuliani, Mike Huckabee, Duncan Hunter, John McCain, Ron Paul, Mitt Romney, Tom Tancredo, Fred Thompson, Tommy Thompson, political issues" />
<meta name="description" content="Sway the Vote allows people to voice their opinions on which issues mean the most to them and how we can solve these issues." />

<!-- <link rel="stylesheet" type="text/css" href="screen.css" /> -->

<title>Sway The Vote - Let your voice be heard about current politcal issues</title>

</head><body>

<div id="container">

	<h1><a href="http://www.swaythevote.com/">
		<i>Sway</i><b>the</b><strong>VOTE</strong>.com<span></span>
	</a></h1>

	<ul id="main_menu">
		<li><a href="index.html">Home</a></li>
		<li><a href="">Issues</a></li>
		<li><a href="">Survey</a></li>
		<li><a href="contact.html">Contact Us</a></li>
	</ul>

	<div class="content_box" id="voice">
		<h2>Voice Your Opinion<span></span></h2>

		<div class="content">
			<p>TOP ISSUES RESULTS HERE IN TEXT AND GRAPHS</p>
		</div>
		
		<div class="survey"><a href="#">Click Here to Begin Survey<span></span></a></div>

	</div>

	<div class="content_box" id="issues">
		<h2>Issues!<span></span></h2>

		<div class="content">
			<ul>
				<li><a href="">Crime</a></li>
				<li><a href="">Economy</a></li>
				<li><a href="">Education</a></li>
				<li><a href="">Energy</a></li>
			</ul>
	
			<ul>
				<li><a href="">Environment</a></li>
				<li><a href="">Federal Budget</a></li>
				<li><a href="">Healthcare</a></li>
				<li><a href="">National Defense</a></li>
			</ul>
	
			<ul>
				<li><a href="">Social Security</a></li>
				<li><a href="">Taxes</a></li>
				<li><a href="">Terrorism</a></li>
				<li><a href="">Welfare</a></li>
			</ul>
		</div>

	</div>
	
	<div id="footer">
		Copyright 2007 Sway The Vote.  All rights reserved.
	</div>
	
</div>

</body></html>
    Code (markup):
    First off make the header - a HEADER1 tag, including the actual text the image contains, toss some tags on that text to apply similar styling to the image appearance, and a empty span to actually apply the image over the text.

    The menu is ok, except there is NO need for that extra wrapper.

    Same for your content area, that extra #main wrapper isn't needed since you are doing single column.

    The two content boxes will likely share some appearance so you were right to give them the same class, but there's enough differences I'd also assign an ID.

    Again, you have a header with content, and as a image search engines are just not going to see them - so make those H2 tags and again set up a blank span for CSS image replacement.

    For consistancy we'll not inline any text without a wrapper in the DIV, this will let us apply specific padding to that element as needed... That 'survey' link we might as well set up for now - if we style that separate from the table and use some positioning tricks in the CSS we can reduce the size of that 'extra' image - same goes for the headers... if we apply an extra DIV around the content, we can skip ALL those pesky presentational image tags and instead apply the top to the H2, the bottom image to the actual #content_box container and the tiling to ".content_box .content"

    Finally the footer should be a block level tag.

    If I have some time in a couple hours I'll toss together the CSS for this and post up a working example.
     
    deathshadow, Aug 10, 2007 IP
    wholesalechecklist likes this.
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Ok, here's how I'd make the CSS:

    http://battletech.hopto.org/for_others/wholesalechecklist/screen.css

    Which you can see working live with the images here:

    http://battletech.hopto.org/for_others/wholesalechecklist/template.html

    The directory as with all my examples is unlocked
    http://battletech.hopto.org/for_others/wholesalechecklist

    so you can grab the naughty bits - I 'remastered' and recut all the images reducing the total number of files to five, and they total about half the total filesize.

    Validates XHTML 1.0 strict, works identical in IE 6 & 7, Opera, Safari and FF. Does NOT work in IE 5.x - but frankly at this point we really need to stop bending over backwards to support that tired old beast.

    I'll type up a step by step explanation of the CSS the next time I have a few spare minutes.
     
    deathshadow, Aug 10, 2007 IP