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.

Margin Problem in IE

Discussion in 'CSS' started by lv211, Aug 19, 2009.

  1. #1
    lv211, Aug 19, 2009 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well first off, see the comment above your doctype? That's throwing IE into quirks mode. That right there gives you a different box model and therein headaches from hell... beyond that given you have 174 validation errors finding what could be throwing off the layout is such a royal pain in the ass it would probably be faster to rewrite it from scratch... Just exactly which of the crap WYSIWYGs or frameworks saddled you with this mess in the first place?

    It's filled top to bottom with code that is obviously written by someone who doesn't actually know HTML - like the inline level elements (anchors) around paragraph tags (serious WTF?), the obvious headings not marked up as headings, Improperly marked up table (there are tags OTHER than TD you can use in there!), clearing breaks, CSS in the markup, presentational markup - hell even the comment placements could trip rendering errors in IE (that's no joke, yes, I said COMMENTS) - which is a goodly portion of how it ends up over 14k of markup for only 3.7k of content.

    There are bigger issues here than rendering in IE, since I'm seeing four different appearances between IE, Opera, Safari and Firefox.

    So yeah, first step would be to throw it away and start over with semantic markup and separation of presentation from content.

    But then the wrapping/non-wrapping train wreck that is that sidebar of advertising isn't helping matters much - as designs go that falls into the 'non-viable' layout category.

    A 'clean' markup for that would be something like this:
    <!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"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="print.css"
    	media="print"
    />
    
    <title>
    	Garagiste Winery - 25318 Kanaskat Dr, Black Diamond WA United States
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		Windery<span>Finder</span><br />
    		<small>a vinyard and winery resource</small>
    		<b></b>
    	</h1>
    	
    	<ul id="menu">
    		<li><a href="http://www.wineryfinder.net/">Home</a></li>
    		<li><a href="http://www.wineryfinder.net/search.php" title="Search">Search</a></li>
    		<li><a href="http://www.wineryfinder.net/browse.php" title="Browse Wineries">Browse Wineries</a></li>
    		<li><a href="http://www.wineryfinder.net/about.php" title="About">About</a></li>
    		<li><a href="http://www.wineryfinder.net/contact.php" title="Contact">Contact</a></li>
    	</ul>
    	
    	<div id="contentWrapper"><div id="content">
    
    		<script type="text/javascript"><!--
    			google_ad_client = "pub-4474082407294062";
    			/* 728x90, created 7/4/08 */
    			google_ad_slot = "4220964424";
    			google_ad_width = 728;
    			google_ad_height = 90;
    			//-->
    			</script>
    			<script type="text/javascript"
    				src="http://pagead2.googlesyndication.com/pagead/show_ads.js"
    			></script>
    
    		<h2><a href="/wine.php?id=4932">Garagiste Winery</a></h2>
    		
    		<ul class="breadcrumbs">
    			<li><a href="">United States</a> &raquo;</li>
    			<li><a href="state.php?state=Washington">Washington</a> &raquo;</li>
    			<li><a href="county.php?county=King">King</a> &raquo;</li>
    			<li><a href="city.php?city=Black Diamond">Black Diamond</a> &raquo;</li>
    		</ul>
    		
    		<div id="map"></div>
    		
    		<hr />
    		
    		<table class="wineryInfo">
    			<caption>Garagiste Winery</caption>
    			<tr>
    				<th>Address</th>
    				<td>25318 Kanaskat Dr, Black Diamond WA</td>
    			</tr><tr>
    				<th>Website</th>
    				<td><a href="http://www.garagistewinery.com/">Garagiste Winery website</a></td>
    			</tr><tr>
    				<th>Contact</th>
    				<td>No contact information provided</td>
    			</tr>
    		</table>
    		
    		<hr />
    		
    		<script type="text/javascript"><!--
    						google_ad_client = "pub-4474082407294062";
    						/* 728x90, created 7/4/08 */
    						google_ad_slot = "4220964424";
    						google_ad_width = 728;
    						google_ad_height = 90;
    						//-->
    						</script>
    						<script type="text/javascript"
    						src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    		</script>
    		
    		<hr />
    
    		<div class="flickr_results">
    			<h3>Garagiste Winery- Results from <a href="http://www.flickr.com">Flickr</a></h3>
    			<a href="http://www.flickr.com/photos/38972255@N06/3655919615/">
    				<img src="http://farm4.static.flickr.com/3298/3655919615_98b4a69d1c_s.jpg"
    					alt="Garagiste Winery winery pictures from The Wine Ladies"
    				/>
    			</a>
    		</div>
    		
    		<hr />
    
    		<div id="infoboxes">
    		
    			<h3>
    				<a href="state.php?state=Washington">
    					Wineries from Washington
    				</a>
    			</h3>
    			<ul>
    				<li><a href='wine.php?id=5082'>'37 Cellars</a></li>
    				<li><a href='wine.php?id=5366'>428 Wines</a></li>
    				<li><a href='wine.php?id=4977'>Aardvark Cider</a></li>
    				<li><a href='wine.php?id=5043'>Abacus Wine</a></li>
    				<li><a href='wine.php?id=5206'>Abeja</a></li>
    				<li><a href='wine.php?id=4999'>Adamant Cellars</a></li>
    				<li><a href='wine.php?id=4923'>Adams Bench</a></li>
    				<li><a href='wine.php?id=5255'>Adytum Cellars</a></li>
    				<li><a href='wine.php?id=4945'>Airfield Estate Winery</a></li>
    				<li><a href='wine.php?id=4946'>Airfield Estates</a></li>
    				<li><a href='wine.php?id=4968'>Alexandria Nicole Cellars</a></li>
    				<li><a href='wine.php?id=5050'>Alger Winery</a></li>
    				<li><a href='wine.php?id=4905'>Alia Wines</a></li>
    				<li><a href='wine.php?id=4911'>Almquist Family Cellars </a></li>
    				<li><a href='wine.php?id=5276'>Amavi Cellars</a></li>
    			</ul>
    			<ul>
    				<li><a href='wine.php?id=5328'>Ambrosia Meadery</a></li>
    				<li><a href='wine.php?id=5130'>Andrew Will Cellars</a></li>
    				<li><a href='wine.php?id=5298'>Animale</a></li>
    				<li><a href='wine.php?id=4931'>Anna Marie Vineyard</a></li>
    				<li><a href='wine.php?id=5024'>Anton Ville Winery</a></li>
    				<li><a href='wine.php?id=4890'>Apex Cellars</a></li>
    				<li><a href='wine.php?id=5119'>Arbor Crest Wine Cellars</a></li>
    				<li><a href='wine.php?id=5337'>Arbutus Winery</a></li>
    				<li><a href='wine.php?id=5350'>Arlington Road Cellars</a></li>
    				<li><a href='wine.php?id=5346'>Ash Hollow Winery </a></li>
    				<li><a href='wine.php?id=5224'>Austin Robaire Vintners</a></li>
    				<li><a href='wine.php?id=5338'>Bader Winery</a></li>
    				<li><a href='wine.php?id=5154'>Badger Mountain </a></li>
    				<li><a href='wine.php?id=5217'>Baer Winery </a></li>
    			</ul>
    			<ul>
    				<li><a href='wine.php?id=5103'>Bainbridge Island Winery</a></li>
    				<li><a href='wine.php?id=4891'>Balboa Winery</a></li>
    				<li><a href='wine.php?id=4907'>Balsamroot Winery</a></li>
    				<li><a href='wine.php?id=5135'>Barnard Griffin</a></li>
    				<li><a href='wine.php?id=5075'>Barrage Cellars</a></li>
    				<li><a href='wine.php?id=5073'>Barrel Springs Winery</a></li>
    				<li><a href='wine.php?id=5229'>Barrister Winery</a></li>
    				<li><a href='wine.php?id=4837'>Basalt Cellars</a></li>
    				<li><a href='wine.php?id=5305'>Basel Cellars</a></li>
    				<li><a href='wine.php?id=4984'>Bauer Cellars</a></li>
    				<li><a href='wine.php?id=4872'>Beaucoup Gravier Winery</a></li>
    				<li><a href='wine.php?id=5070'>Bella Terrazza Vineyards</a></li>
    				<li><a href='wine.php?id=5316'>Benke Cellars</a></li>
    			</ul>
    			
    		<!-- #infoboxes --></div>
    
    		<a href="http://www.addthis.com/bookmark.php"
    			onclick="addthis_url=location.href; addthis_title=document.title; return addthis_click(this);"
    		>
    			<img 
    				src="http://s9.addthis.com/button1-bm.gif"
    				width="125" height="16"
    				alt="Bookmark and Share"
    			/>
    		</a>
    		<script type="text/javascript"><!--
    			var addthis_pub='lv211';
    		--></script>
    		<script type="text/javascript"
    			src="http://s9.addthis.com/js/widget.php?v=10"
    		></script>
    	<!-- #content, #contentWrapper --></div></div>
    	
    	<div id="sideBar">
    	
    		<h2>Sponsored Links</h2>
    
    		<div class="adbox">
    			<h3>
    				<a href="redirect.php?link=01">
    					The Complete Illustrated Guide To Homemade Wine.
    				</a>
    			</h3>
    			<p>
    				This Insiders Guide To Homemade Wine Gives You All The Secrets To Produce Delicious, Fine Wine.
    			</p>
    			<a href="redirect.php?link=01">www.how-to-make-wine.net</a>
    		</div>
    
    		<div class="adbox">
    			<h3>
    				<a href="redirect.php?link=02">
    					The Ultimate Fruit Winemaker's Guide.
    				</a>
    			</h3>
    			<p>
    				Written By An Award Winning Professional Fruit Winemaker. A Valuable Resource From Growing And Selecting The Fruit To Selling The Wine On The Other Side Of The World!
    			</p>
    			<a href="redirect.php?link=02">www.fruitwineguide.com</a>
    		</div>
    
    		<div class="adbox">
    			<h3>
    				<a href="redirect.php?link=03">
    					Tips And Secrets To Making Great Wine.
    				</a>
    			</h3>
    			<p>
    				Learn How To Make Great-tasting, Crystal-clear Wine At Home!
    			</p>
    			<a href="redirect.php?link=03">www.makinggreatwine.com</a>
    		</div>
    
    		<div class="adbox">
    			<h3>
    				<a href="redirect.php?link=04">
    					Home Winemaking: Step By Step.
    				</a>
    			</h3>
    			<p>
    				A Complete Guide To Winemaking, With Loads Of Tips And Tricks For Making Crystal Clear, Prize-winning Wines.
    			</p>
    			<a href="redirect.php?link=04">www.easy-wine.net</a>
    		</div>
    
    		<div class="adbox">
    			<h3>
    				<a href="redirect.php?link=05">
    					Secret Wine Making Recipes.
    				</a>
    			</h3>
    			<p>
    				First Time Revealed: Discover Now Secrets Of Perfect Self Made Wines.
    			</p>
    			<a href="redirect.php?link=05">www.makeperfectwines.com</a>
    		</div>
    	
    		<div class="adbox">
    			<h3>
    				<a href="redirect.php?link=06">
    					A - Z Guide To Become A Wine Merchant.
    				</a>
    			</h3>
    			<p>
    				Turn Your Love Of Fine Wines Into A Profitable Business. Risk Free. Money Back Guarantee.
    			</p>
    			<a href="redirect.php?link=06">www.italian-wine-guide.com</a>
    		</div>
    	
    		<div class="adbox">
    			<h3>
    				<a href="redirect.php?link=07">
    					Fool-Proof Wine Values.
    				</a>
    			</h3>
    			<p>
    				Learn How To Easily Find Wines Of $50 Quality For $10 Or Less.
    			</p>
    			<a href="redirect.php?link=07">www.winevalues.net</a>
    		</div>
    	
    		<div class="adbox">
    			<h3>
    				<a href="redirect.php?link=08">
    					Red Wine For Beginners - Study Course.
    				</a>
    			</h3>
    			<p>
    				A Comprehensive Home Study Course For Discovering The Latent Red Wine Aficionado Within You, In 28 Easy To Follow, Step-by-step Lessons.
    			</p>
    			<a href="redirect.php?link=08">www.redwineforbeginners.com</a>
    		</div>
    
    	<!-- #sideBar --></div>
    	
    	<div id="footer">
    		<a href="http://www.wineryfinder.net/">Wineryfinder: A Vineyard and Winery resource</a>
    		<ul>
    			<li><a href="http://www.wineryfinder.net/about.php">About</a></li>
    			<li><a href="http://www.wineryfinder.net/contact.php">Contact</a></li>
    			<li><a href="http://www.wineryfinder.net/privacy.php">Privacy Policy</a></li>
    			<li><a href ="">Terms of Service</a></li>
    		</ul>
    	<!-- #footer --></div>
    
    <!-- #pageWrapper --></div>
    
    
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
    
    <script type="text/javascript"><!--
    _uacct = "UA-450686-6";
    urchinTracker();
    --></script>
    
    </body></html>
    
    Code (markup):
    Though a lot of style liberties would have to be taken once you do the CSS - since I'm not even certain what you are trying to make it look like... can I assume the appearance in firefox is what you want?
     
    deathshadow, Aug 19, 2009 IP
    lv211 likes this.
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    Please be more specific. Which margins are doing what?

    //edit: Ah, ds got in there with a lot more applicable comments. I too, had no clue what was the desired look. --gt

    gary
     
    kk5st, Aug 19, 2009 IP
  4. lv211

    lv211 Peon

    Messages:
    168
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I'll look into what you said deathshadow.

    I originally hacked the html from a wordpress theme that someone else had written.

    I guess I need to sharpen my design skills.

    Thanks for your input.
     
    lv211, Aug 20, 2009 IP