SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry I thought I was cross browser FINISHED...help!

    I posted my site in the critique forum and discovered that my all CSS design is not as cross browser compliant as I thought (or had tested on).

    I origially tested on the Opera 7.23 and IE 6.x as well as Mozilla 1.1a. All those were perfect. I have since been told someone using an older Opera sees the site all whacked out. I also was told Mozilla/Firebird it was whacked out as well. I downloaded the latest Mozilla (1.6) and Firebird...sure enough the site is looking terrible! It completely collapses the center area of my site among a few other things. I was also told IE 5.2 has content breaking out all sides of the design and in Mac safari the content is displaying as blank whitespace, no content.

    Any known issues I should be aware of or code quirks/tips to try and get over this end of the marathon hurdle?

    www.divisionusa.com is the site, only the frontpage is there but this will be a template for the rest of the site. HELP?! <begging> lol

    EDIT: I notice when I refresh quickly in Firebird/Moz 1.6 that it temporarily holds the layout somewat, the collapses. Not sure if that info would help anyone troubleshoot.
    Last edited by MetalAges; Jan 26, 2004 at 16:32.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The main problem with mozilla is that you need to add div style=clear:both in appropriate places and in some instances <br style="clear:both />. mozilla likes something to get hold off before it will extend the container.

    Also you have some invlaid mark up at the bottom of your page and seems to have too many closing div tags. You also have misplaced and duplicated closing body tags and html tags.

    I think this should make it display better in mozilla opera7 and ie6:
    Code:
    <body>
    <div id="container2"> 
    <div id="header"> 
    	<div id="logo"></div>
    	<div id="nav"> 
    	 <div class="navtext"><a href="index2.php">HOME</a> <a href="news.php">NEWS</a> 
    		<a href="band.php">BAND</a> <a href="albums.php">ALBUMS</a> <a href="/gallery/">GALLERY</a> 
    		<a href="media.php">MEDIA</a> <a href="http://www.ultimatemetal.com/forum/f...hp?forumid=166" target="_blank">FORUM</a> 
    		<a href="links.php">LINKS</a> <a href="tours.php">SHOWS</a> <a href="contact.php">CONTACT</a></div>
    	</div>
    	<div id="title"><span class="pagetitle">HOME</span></div>
    	<div id="maillist"> 
    	 <div id="maillist2">Don't forget to sign up for the newsletter ! <a href="#maillist">CLICK 
    		HERE!</a> </div>
    	</div>
    </div>
    <div id="main"> 
    	<div id="content1"> 
    	 <div class="headers"><img src="http://www.divisionusa.com/images/he...latestnews.gif" alt="Latest News" width="160" height="30"></div>
    	 <div id="latestnews"> 
    		<p><span class="dateboldsm">01-20-04</span> After four long years...Trinity 
    		 is finally available!. </p>
    		<p><span class="dateboldsm">01-23-04</span> CD release party a success! 
    		 Helloween played great as well.. </p>
    		<p><span class="dateboldsm">01-23-04</span> Chicago Powerfest is a go, 
    		 looking forward to seeing you there in February!</p>
    		<p><span class="dateboldsm">01-23-04</span> New drummer added to the Division 
    		 camp.. </p>
    		<p><a href="news.php">MORE NEWS</a></p>
    	 </div>
    	 <div class="headers"><img src="http://www.divisionusa.com/images/headers/h-shows.gif" alt="New Shows" width="160" height="30"></div>
    	 <div id="shows"> 
    		<p><span class="dateboldsm">02-27/28-04</span> <br>
    		 Chicago Powerfest<br>
    		 J.J. Kelley's<br>
    		 Chicago, IL. </p>
    		<p><span class="dateboldsm">04-09-04</span> <br>
    		 Lizzy Borden and Krokus<br>
    		 JAXX Nightclub<br>
    		 Springfield, Va. </p>
    		<p><span class="dateboldsm">08-23-04</span> <br>
    		 Nightwish<br>
    		 JAXX Nightclub<br>
    		 Springfield, Va.</p>
    		<p><a href="news.php">MORE SHOWS</a></p>
    	 </div>
    	 <div class="headers"><img src="http://www.divisionusa.com/images/he...iteupdates.gif" alt="Site Updates" width="160" height="30"></div>
    	 <div id="siteupdates"> 
    		<p><span class="dateboldsm">01-24-04</span> Check out the brand new Division 
    		 forum! </p>
    		<p><span class="dateboldsm">01-24-04</span> Brand new site! Hope everyone 
    		 enjoys it!</p>
    	 </div>
    	</div>
    	<div id="banner"> 
    	 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...rsion=6,0,29,0" width="553" height="80">
    		<param name="movie" value="flash/flash-division1.swf">
    		<param name="quality" value="high">
    		<embed src="http://www.divisionusa.com/flash/flash-division1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="553" height="80"></embed> 
    	 </object>
    	</div>
    	<div id="topnews"> 
    	 <div class="topnewstext"> <img src="http://www.divisionusa.com/images/co...rinity-300.jpg" alt="Division - Trinity : NOW AVAILABLE!" width="300" height="300" class="imgleftboxwht"> 
    		<p><img src="http://www.divisionusa.com/images/he...-headlines.gif" alt="Division Headlines" width="220" height="30" class="headline"></p>
    		<p>&nbsp;</p>
    		<p>TRINITY is now available! After four long years of waiting the album 
    		 surfaces for consumption among the Metal masses. Track listing is as 
    		 follows:<br>
    		 <br>
    		</p>
    		<p><span class="textwhtsm">01. Eleventh Hour<br>
    		 02. Masquerade<br>
    		 03. The New Elite<br>
    		 04. The Prophecy (Greed)<br>
    		 05. Echoes of the Past<br>
    		 06. Tapping the Vein<br>
    		 07. Left Behind<br>
    		 08. New Horizons<br>
    		 09. Trinity (No Exit)<br>
    		 10. Sea of Hate<br>
    		 11. No World Order</span><br>
    		 <br>
    		</p>
    		<p><span class="textwhtsm"><a href="http://www.metalages.com/store" target="_blank">ORDER 
    		 </a> | <a href="album-trinity.php">ALBUM DETAILS</a> | <a href="media.php">SAMPLES</a></span><br>
    		</p>
    		<div style="clear:both" /></div>
    	</div>
    </div>
    <div id="content2"> 
    	<div id="promo"> 
    	 <div class="headers2"><img src="http://www.divisionusa.com/images/headers/h-promo.gif" alt="Division Promotions" width="220" height="30"></div>
    	 <div class="textpromo"> <a name="maillist"></a> Subscribe to our Mailing 
    		List! 
    		<form action="http://www.divisionusa.com/cgi-bin/dada/mail.cgi">
    		 <input type="radio" name="flavor" value="subscribe" checked>
    		 Subscribe 
    		 <input type="radio" name="flavor" value="unsubscribe">
    		 Unsubscribe<br>
    		 <input type="hidden" name="list" value="division">
    		 <input type="text" name="email" value="email address" size="16">
    		 <input type="submit" value="Join">
    		</form>
    		Keep up to date with our latest news, live shows and any other Division 
    		specific news!</div>
    	</div>
    	<div id="forum"> 
    	 <div class="headers2"><img src="http://www.divisionusa.com/images/headers/h-forum.gif" alt="Division Forum" width="220" height="30"></div>
    	 <div class="textforum"> <a href="http://www.ultimatemetal.com/forum/s...hreadid=133555" target="_blank"><font size="1" face="">Welcome 
    		to the new Division forum!</font></a><br>
    		<a href="http://www.ultimatemetal.com/forum/s...hreadid=133551" target="_blank"><font size="1" face="">test</font></a><br>
    		<a href="http://www.ultimatemetal.com/forum/s...hreadid=133552" target="_blank"><font size="1" face="">Bee 
    		bop dah boo</font></a><br>
    		<!--start debug html-->
    		<!--end debug html-->
    	 </div>
    	</div>
    </div>
    <br style="clear:both" />
    </div>
    <div style="clear:both"></div>
    <div id="footer"></div>
    <div id="footnav"><a href="index2.php">HOME</a> <a href="news.php">NEWS</a> <a href="band.php">BAND</a> 
    <a href="albums.php">ALBUMS</a> <a href="/gallery/">GALLERY</a> <a href="media.php">MEDIA</a> 
    <a href="http://www.ultimatemetal.com/forum/f...hp?forumid=166" target="_blank">FORUM</a> 
    <a href="links.php">LINKS</a> <a href="tours.php">SHOWS</a> <a href="contact.php">CONTACT</a> 
    </div>
    </div>
    </body>
    </html>
    (Reset the absolute images sources to relative. (It's just easier for me to copy this back if you have more questions.))

    I can't help with display problems on the mac as I don't have one

    Hope that helps anyway.

    Paul

  3. #3
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I swear Paul, you are just priceless my man.

    For those wondering what fixed my issues... in the code Paul posted... starting at <!--start debug html-->
    <!--end debug html--> (near bottom) and especially the 2 following pieces: <br style="clear:both" /> and <div style="clear:both"></div> solved my display quirks.

    So, when can we expect the "PayPaul Foundation" to be set up? I would gladly throw a couple bucks your way for saving the expansion of my bald spot! lol.

    THANK YOU! Off to study more about this clear:both stuff... (I don't yet know if it solves the IE 5.2 or MAC problems but Firebird/Mozilla 1.6 are fine now).


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
  •