View Full Version : CSS Template Help with IE7 & Firefox

06-07-2007, 02:56 AM
:thumbsup: Hey Yall:

New here and looking for some ideas. I spent 20+ years in IT, Cisco, Novel, Telephony till outsourced three years ago. Never worked much with web things, not my administrative fun thing. I have had a personal website since 1996 though. OK

I'm slowly learning at 56, CSS, HTML, XHTML, etc. The best way I learn is looking at CSS code etc., then playing with till I understand it. Here is my problem,

The Left Fluid/Right Fixed column CSS code and HTML page with images was free to use, just the kind I like to learn from. Firefox 2.0 works great with these files, but IE7 does not. The fonts blow up much to large, and I think it has to do with the em setttings, but not sure. I wrote to the author, no answer in a week, yet I'd like to learn, it's either that or back to Spanish for something to do.

I'll attach the files and see if you can give me any ideas how to make IE7 look like Firefox from the files attached.

Thanks much and appreciate the help.


Since I cannot upload the html page here it is called index.html, the other files are attached.
<!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" xml:lang="en" lang="en">


<meta name="Description" content="Information architecture, Web Design, Web Standards." />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Robots" content="index,follow" />

<link rel="stylesheet" href="Ablaze.css" type="text/css" />




<!-- header starts here -->
<div id="header"><div id="header-content">

<h1 id="logo">ablaze</h1>
<h2 id="slogan">Put your site slogan here...</h2>

<div class="searchform">
<form action="#">
<input name="search_query" class="textbox" type="text" />
<input name="search" class="button" value="Search" type="submit" />

<!-- Menu Tabs -->
<li><a href="index.html" id="current">Home</a></li>
<li><a href="index.html">News</a></li>
<li><a href="index.html">Downloads</a></li>
<li><a href="index.html">Support</a></li>
<li><a href="index.html">About</a></li>


<!-- content-wrap starts here -->
<div id="content-wrap"><div id="content">

<div id="sidebar" >

<div class="sidebox">
<h1>Sidebar Menu</h1>
<ul class="sidemenu">
<li><a href="index.html" class="top">Home</a></li>
<li><a href="#TemplateInfo">TemplateInfo</a></li>
<li><a href="#SampleTags">Sample Tags</a></li>
<li><a href="http://www.styleshout.com/">More Templates...</a></li>
<li><a href="http://www.4templates.com/?aff=ealigam">Premium Templates</a></li>

<div class="sidebox">
<ul class="sidemenu">
<li><a href="http://www.dreamhost.com/r.cgi?287326" class="top">Dreamhost</a></li>
<li><a href="http://www.4templates.com/?aff=ealigam">4templates</a></li>
<li><a href="http://store.templatemonster.com/?aff=ealigam">TemplateMonster</a></li>
<li><a href="http://www.fotolia.com/partner/114283">Fotolia.com</a></li>
<li><a href="http://www.text-link-ads.com/?ref=40025">Text Link Ads</a></li>

<div class="sidebox">
<h1>Wise Words</h1>

<p>&quot;Our life is what our thoughts make it.&quot;</p>

<p class="align-right">- Marcus Aurelius</p>

<div class="sidebox">
<h1>Support Styleshout</h1>
<p>If you are interested in supporting my work and would like to contribute, you are
welcome to make a small donation through the
<a href="http://www.styleshout.com/">donate link</a> on my website - it will
be a great help and will surely be appreciated.</p>


<div id="main">

<a name="TemplateInfo"></a>
<h1>Template <span class="gray">Info</span></h1>

<p><strong>Ablaze 2.1</strong> is a free, W3C-compliant, CSS-based website template
by <strong><a href="http://www.styleshout.com/">styleshout.com</a></strong>. This work is
distributed under the <a rel="license" href="http://creativecommons.org/licenses/by/2.5/">
Creative Commons Attribution 2.5 License</a>, which means that you are free to
use and modify it for any purpose. All I ask is that you include a link back to
<a href="http://www.styleshout.com/">my website</a> in your credits.</p>

<p>For more free designs, you can visit
<a href="http://www.styleshout.com/">my website</a> to see
my other works.</p>

<p>Good luck and I hope you find my free templates useful!</p>

<p class="comments align-right">
<a href="index.html">Read more</a> :
<a href="index.html">Comments(7)</a> :
Nov 08, 2006

<a name="SampleTags"></a>
<h1>Sample Tags</h1>

code-sample { <br />
font-weight: bold;<br />
font-style: italic;<br />

<h3>Example Lists</h3>

<li><span>example of ordered list</span></li>
<li><span>uses span to color the numbers</span></li>

<li><span>example of unordered list</span></li>
<li><span>uses span to color the bullets</span></li>

<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat....</p></blockquote>

<h3>Image and text</h3>
<a href="http://getfirefox.com/"><img src="images/firefox-gray.jpg" width="100" height="121" alt="firefox-gray" class="float-left" /></a>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum
odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra
condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna.
In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar
ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.

<h3>Example Form</h3>
<form action="#">
<input name="dname" value="Your Name" type="text" size="30" />
<input name="demail" value="Your Email" type="text" size="30" />
<label>Your Comments</label>
<textarea rows="5" cols="5"></textarea>
<br />
<input class="button" type="submit" />

<br />


<!-- content-wrap ends here -->

<!-- footer starts here -->
<div id="footer"><div id="footer-content">

<div class="col float-left">
<h2>Site Partners</h2>
<li><a href="http://www.dreamhost.com/r.cgi?287326"><strong>Dreamhost</strong> - Excellent Webhosting at $7.95/mo</a></li>
<li><a href="http://www.4templates.com/?aff=ealigam"><strong>4templates</strong> - Low Cost Hi-Quality Templates</a></li>
<li><a href="http://store.templatemonster.com/?aff=ealigam"><strong>TemplateMonster</strong> - Best templates on the net!</a></li>
<li><a href="http://www.fotolia.com/partner/114283"><strong>Fotolia</strong> - Free stock images or from $1</a></li>
<li><a href="http://www.text-link-ads.com/?ref=40025"><strong>Text Link Ads</strong> - Easiest. Money. Ever.</a></li>

<div class="col float-left">
<li><a href="http://www.openwebdesign.org/"><strong>openwebdesign.org</strong></a></li>
<li><a href="http://www.OSWD.org/"><strong>OSWD.org</strong></a></li>
<li><a href="http://www.zeroweb.org/"><strong>zeroweb.org</strong></a></li>
<li><a href="http://www.alistapart.com/"><strong>Alistapart</strong></a></li>
<li><a href="http://www.cssremix.com/"><strong>CSS Remix</strong></a></li>

<div class="col2 float-right">
&copy; copyright 2006 <strong>Your Company Name</strong><br />
Design by: <a href="index.html"><strong>styleshout</strong></a> &nbsp; &nbsp;
Valid <a href="http://jigsaw.w3.org/css-validator/check/referer"><strong>CSS</strong></a> |
<a href="http://validator.w3.org/check/referer"><strong>XHTML</strong></a>

<li><a href="index.html"><strong>Home</strong></a></li>
<li><a href="index.html"><strong>Sitemap</strong></a></li>
<li><a href="index.html"><strong>RSS Feed</strong></a></li>

<!-- footer ends here -->


Coastal Web
06-07-2007, 06:11 AM
Greetings TraderT,

Let me be the first to welcome you to CodingForums.com!
In any event, l've uploaded the two files to my server to take a look. They can be seen here: http://www.coastalwebinnovations.com/test/help/test.html - in any event after looking at the the page in both IE and FF for a handful of minutes l didn't notice any "glaring" differences. Can you please explain more specifically what it is that you're looking to change?

Best regards,

06-07-2007, 06:19 AM
Same here. It almost seems as if you text size under the Page menu has been changed. At medium the page looks pretty similar in Firefox and IE7. I think you should take a look at www.csszengarden.com.
Take note of the HTML. For every layout its exactly the same. Only thing changing is the CSS.

06-07-2007, 04:54 PM
Hello Samantha and others:

the text in firefox looks small and correct in size. The text for the HOME and other header menu items, as well as the rest of page is greatly enlarged, like maybe 3 times larger in size than shows up in Firefox.

I generally test in both, and this one stumped me. I made no changes to the css script file no the html file, after redownloading it. Not sure, must be something on my end, I uploaded the files to my web account and saw the same thing. I will have to see what is up with my IE and go from there, but maybe it is all ok.

Just really stumped me.


EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum