Forum Moderators: not2easy
I've tried adding clear:both, inlines, absolutes, and just about anything I can find, lol, and at best, I can make the whole content section as wide as the screen, but it never fixes the fact that it shifts left in ie6
I think this is the portions that are relevant:
#page { text-align: left; display: inline; margin-bottom: 6em; float: left; clear: both }
#columns {
margin: 0 auto;
}
/* Column widths */
.width { width: 776px }
.widthPad { width: 750px }
.width25 { width: 24% }
.width50 { margin-left: 4px; width: 49% }
.width73 {
width: 73%;
margin-left:4px;
}
.width75 { margin-left: 4px; width: 74% }
.width100 {
width: 100%;
}
This is the template page code :
<div id="menu" class="width">
</div>
<!-- #menu end -->
<!-- #page: holds the page content -->
<div id="page">
<!-- #columns: holds the columns of the page -->
<div id="columns" class="widthPad">
<!-- Left thumbnail column -->
<div class="floatLeft width25">
<?php mosLoadModules ( 'left', -2 ); //menu principal?>
</div>
<!-- Left thumbnails end -->
<!-- Center news column -->
<div class="floatLeft <?php echo $right <= 0? "width75" : "width50";?>">
<!-- Start Post -->
<div class="post">
<?php mosMainBody();?>
</div>
<!-- End Post -->
</div>
<!-- Center news column end -->
<?php
if ( $right > 0 )
{
echo "<!-- Right link column -->";
echo "<div class=\"floatRight width25 lightBlueBg horzPad\">";
mosLoadModules ( 'right', -2 );
echo "</div>";
echo "<!-- Right links column end -->";
}
?>
</div>
<!-- #columns end -->
<p> </p>
</div>
<!-- #page end -->
<p> </p>
</div>
<!-- #content end -->
This is the first message board I've found that seems to at least try to answer every post. Good job guys
Could you provide the doctype you are using? It would help in solving the problem.
Marshall
That's what's in the template.
Thanks for answering so quickly Marshall, you're an excellent moderator for this topic, and I see you're very quick to spot issues and resolve them for people. I hope you can help.
<!-- #page end -->
<p> </p>
</div><!-- #content end -->
Is there a live version of this page that you can StickyMail me the link?
Marshall
Sorry, been busy, Here's what I found.
First, remove <?xml version="1.0" encoding="iso-8859-1"?> from the above the <html>. The doctype MUST come first and the above tag simply does not belong on the page. That is what this tag
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
is for.
I am also assuming that <div id="menu" class="width"> is some form of wrapper, or not. First, any element that you want to center on a page needs the following:
1 - A defined width whether pixels, em's or % (n below).
2 - margin: 0 auto;
3 - padding: 0; /* Optional but when using a <div> as a wrapper, it is a good idea */
4 - text-align: left; /* IE hack */
Final product -
#wrapper {
width: n;
height: 100%; /* optional */
padding: 0; /* optional */
text-align: left;
}
This works in IE6 & 7, Opera, Safari, FF, Netscape and Mozzilla. I suggest wrapping all the elements below this comment tag:
<!-- #menu: the main large box site menu -->
If it does not solve your problem, let me know.
Again, sorry about the delay in responding.
Marshall
Post Script
On your page background image, instead of repeat-y, you may want to try:
background-attachment: fixed;
It is a neat effect.
[edited by: Marshall at 7:04 pm (utc) on Oct. 12, 2007]
body { color: white; font: 400 0.6em/170% verdana, arial, sans-serif; background: black url('../images/bg/newbgrnd.jpg') top center no-repeat; background-attachment: fixed; text-align: center; margin: 0; padding: 0; }
Just copy and paste it. :)
Marshall
the part that's off now is, this slid the "content" section down a ways, and the footer has a little of space in front of it too. I did more fussing, and can't seem to shake that, so I'm hoping to get you to look at it again. Should I post the style as it is now?
You really are a css god. I bow down to your great wisdom and awesomeness.
Marshall
PS - I got it. Let me look at it again. I saw the new problem in IE6.
[edited by: Marshall at 4:25 am (utc) on Oct. 13, 2007]
I looked at the page again and I believe the problem is width settings. Your .width25 is set at 24% and your .width75 is set at 74%. Granted that only adds up to 98%, but by the time you add in the margins, you exceed 100%. I suggest reducing the .width25 to 20% or create a new class, say .width20. This should solve the float problem.
On an unrelated note, you are using XHTML transitional and embedded tables. The attribute width="n" is both depreciated and outdated in XHTML. You can either not specify the width or assign either an in-line style: <td style="width: 25%;"> or create a class: .td25 {width: 25%;}. You are also using <div align="center">. Same applies as with the <td>. Since by default items in tables align left, the <tr align="left"> is not necessary.
You are also using things like <p align="center">. This too is depreciated and should be replaced with <p style="text-align: center;">
I strongly suggest you run you CSS and XHTML through the {url=http://www.w3.org/]W3[/url] validators - CSS [jigsaw.w3.org], XHTML [validator.w3.org]. Also, you may want to check the W3 on-line web tutorials [w3schools.com] on XHTML and CSS.
Please understand, I am not criticizing you, but when you jump into CSS and XHTML, you need to know the basics. You may also want to check the thread choosing the right doctype [webmasterworld.com] and why most of us should not use XHTML doctype [webmasterworld.com].
The resources of WebmasterWorld are at your disposal - take advantage of them.
Marshall
So, since I'm not the creator of this particular piece of work, you can criticize away^^. I tried to validate it with the css validator, but it fails on my flash and none of the messages after that make any sense because of one of the tags in my flash. (guess that's what I get for using wyswyg instead of hand coding that flash object) Some of the code you mention is part of the joomla generated stuff, because it's not in the page template.
I'll go ahead and fuss with your suggestions. I really felt it had to do with width (my hubby was like, how can width turn into a height issue?) so I was tweakin all the widths by tiny imcrements (those did orginally add up to 100% - obviously not quite enuff tweakin)
Thak you very mcuh for your time, I'll let you know the outcome.
If you already own FP, you can upgrade to MS's Expression Web for about $99 or try their 60 free trial - do a web search to find it. Anyway, EW is much, much better than FP and will check CSS for compliance. It won't however, correct width problems when they exceed 100% :)
One thing to remember on widths, you have to add the width of the element, PLUS its margins, borders and padding to actual overall width. Just an FYI.
Marshall
I played with the widths for hours. Tweaking this width and that, as suggested above. I started ripping things out of the template, one div at a time, to see if that would have any effect. I finally removed the top navigation bar and the rest fell into place. I spent more hours tweaking the widths for that nav and never came close to getting it right. Finally, I copied the top nav and the style to go with it from the example you gave me.
The lesson here is that there's more than one way to css. The old style was using ul's, the new style uses links. Same appearance, totally different code.
In case it helps anyone else with a similar issue, I'm posting the resolution.
I went from using this style for a top nav ---
#menu { text-align: left; margin: 0; padding: 0; width: 776px; height: 100% }
#menu ul { background: #000 url("../images/bg/menu.gif") repeat-x left top; text-align: left; margin: 0; padding: 0; width: 774px; float: left }
#menu ul li { list-style: none; display: inline; margin: 0; padding: 0 }
#menu ul li a { color: #fff; font: 700 1.7em arial, sans-serif; text-align: center; letter-spacing: 0.1em; width: 193px; height: 4.5em; float: left; border-top: 7px solid #000; border-bottom: 15px solid black }
#menu ul li a span { display: block; padding: 0 }
#menu ul li a span.desc {
font-size: 0.8em;
color: #8C8D94;
}
#menu ul li a:hover,
#menu ul li a.here { background: #000; border-top: 7px solid red }
#menu ul li a:hover span.desc,
#menu ul li a.here span.desc {
color: #FFF;
}
To this style ----
#top_nav {
margin: 10px 0 20px 0;
padding: 0;
width: 774px;
}
#top_nav .link { font-size: 1.5em; line-height: 1.7em; text-align: center; margin: 0; padding: 0; width: 193px; float: left }
#top_nav .link span {
font-size: 0.8em;
color: #8C8D94;
}
#top_nav .link a {
display: block;
border-top: 7px solid #000;
}
#top_nav .link a:hover {
border-top: 7px solid #F00;
color: #FFF;
}
#top_nav .link a:hover span {
color: #FFF;
}
This was the page code -----
<div id="menu" class="width">
<ul>
<li>
<a href="" onfocus="blur()">
<span class="title ">Sales</span>
<span class="desc style7">New, Custom, Used</span>
</a>
</li>
<li>
<a href="" onfocus="blur()">
<span class="title ">Service</span>
<span class="desc style3">Expert Staff</span>
</a>
</li>
<li>
<a href="" onfocus="blur()">
<span class="title ">Parts</span>
<span class="desc">Top Quality</span>
</a>
</li>
<li>
<a href="" onfocus="blur()">
<span class="title ">Rentals</span>
<span class="desc">Bikes, RVs, ATVs</span>
</a>
</li>
</ul>
</div>
To this page code ----
<div id="top_nav">
<div class="link"><a href="">
Sales<br />
<span>New, Custom, Used</span></a></div>
<div class="link"><a href="">
Service<br />
<span>Expert Staff</span></a></div>
<div class="link"><a href="">
Parts<br />
<span>Top Quality</span></a></div>
<div class="link"><a href="">
Rentals<br />
<span>Bikes, RVs, ATVs</span></a></div>
</div>
