Home  |  About  | Last |  Submit  |  Contact
AllQuests.com

Previous Question: firefox choppy smooth scrolling NVIDIA LinuxNext Question: FS Logitech x 2300 Speakers $60 shipping Marketplace Archive
Question Discovering some major browser issues grr ( SitePoint Forums CSS )
Updated: 2008-11-23 09:05:04 (2)
Discovering some major browser issues grr

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.

Answers: Discovering some major browser issues grr ( SitePoint Forums CSS )
Discovering some major browser issues grr

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).

MetalAges

Discovering some major browser issues grr

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

Paul O'B

Previous Question: firefox choppy smooth scrolling nV News Forums NVIDIA LinuxNext Question: FS Logitech x 2300 Speakers $60 shipping Mac Forums Marketplace Archive

- Source: Discovering some major browser issues grr SitePoint Forums CSS
- Previous Question: firefox choppy smooth scrolling nV News Forums NVIDIA Linux
- Next Question: FS Logitech x 2300 Speakers $60 shipping Mac Forums Marketplace Archive





AllQuests.com