Help Fix My Site's Css/layout Issues Thanks for your time

[gaea 0]

The first issue has been resolved. Please goto Post #7 to see the current discussion.

 

This is in reference to: http://imptestrm.com/rg-erdr.php?_dnm=facesofwar.org&_cfrg=1&_drid=as-drid-2300300503455222

 

When you load the page up in Firefox it works fine. But when you use I.E. it creates a nasty line break after each of the spans containing a dividing line.

 

The relevant html is:

<span class="menuOuter"></span><span class="menuMain">Home    Iraq    Alt. Media    Other    Contact</span><span class="menuOuter"></span>

And the relevant css (for 1280 resolutions) is:

.menuOuter { 	width: 100%;	min-width:1050px;	max-width:1050px;	min-height:12px;	max-height:12px;	background-image: url('../images/1280/menubg.gif');	background-repeat: repeat-x;	display:block;	padding:0;}.menuMain { 	min-width:1050px;	max-width:1050px;	min-height:1em;	display:block;	background-color:#413d3c;	text-align:center;	color:#FFFFFF;	font:2em Arial, Helvetica, sans-serif;	font-weight:bold;}

Thanks for your help ahead of time.
Edited January 25, 2007 by gaea (see edit history)

[BuffaloHelp 24]

I recently fixed unwanted line break with H1 tag by using this as part of stylesheet.

span {display: inline;}

give it a try.

[gaea 0]

Thanks for the suggestion, but it's a no go.

[BuffaloHelp 24]

If SPAN didn't work, then you should go ahead with DIV instead.

Rather than using class to define the structure of your web page, use ID

<div id="mouseOver">
.
.
.
</div>

and of course your stylesheet should reflect accordingly.

If I was designing that navigation portion I would do something like this

<div id="navigation"><a class="menu" href="#">menu1</a> <a class="menu" href="#">menu2</a> etc

And define stylesheet as

#navigation {border top and bottom with style}a.menu {style, color etc}a.menu:hover{style, color behavor when mouse is over}

What you are trying to do is use the SPAN to draw the top borderline and another SPAN to draw the bottom line when stylesheet can define the whole process, including the hover instead of "mouseOver" effect.

[QuickSilva 0]

Thank you for that, BuffaloHELP! I now aswell know how to do it. I will try it out later, but from what I have seen, it looks pretty simple. The simplest things always make the most difference ;o

[gaea 0]

Thanks for the info buffalo.The only problem with using the default border styles is that my image was more complicated...but I replicated it by using nested spans, each with their own color solid border. Slightly convaluted, buy hey--it works.\Good call on the menu classes as well.I'm slowly ironing out the problems with this template. Your assistance is very much apprecaited (now it's time for a new problem topic ;P)

[gaea 0]

Thanks again to everyone for your help, it's very much appreciated.

 

This particular issue pertains to: http://imptestrm.com/rg-erdr.php?_dnm=www.facesofwar.org&_cfrg=1&_drid=as-drid-2300300503455222

 

I'm using a fluid layout with separate style sheets for the following resolutions: 800x600, 1024x768, and 1280x960. All of the pages render correctly on Firefox and Safari. Unfortunately, for no reason that I can figure out, internet explorer refuses to restrict the width of the div tag containing text in the 800x600 and 1024x768 versions of the gallery page. (Yes, I know that i.e. doesn't natively support the css max-width/min-width commands, but I'm getting around it with a javascript). Furthermore, the image size for the thumbnails on that page isn't always correctly restricted either (but I verified that the correct style sheet *is* getting applied). The odd part is that it works 100% fine in the 1280x960 version. And, besides the differing measurements, all the style sheets are completely identical.

 

This one has me really stumped.

 

The 800x600 style sheet is at: http://www.facesofwar.org/templates/facesofwar/css/800.css

The 1024x768 style sheet is at: http://www.facesofwar.org/templates/facesofwar/css/1024.css

The 1280x960 style sheet is at: http://www.facesofwar.org/templates/facesofwar/css/1280.css

 

If anyone can help me figure out what the hell is going on I'd be *exceedingly* grateful.

[matak 2]

This is one of you paragrafs i looked at 1024 version..

<p class="giDescription">All images were taken by Coalition Forces, or families of the victims.
</p>

when i searched your CSS at /templates/facesofwar/css/1024.css i didn't find any CSS description for
giDescription class..

maybe that is the problem?!

[gaea 0]

This is one of you paragrafs i looked at 1024 version..

 

when i searched your CSS at /templates/facesofwar/css/1024.css i didn't find any CSS description for

giDescription class..

 

maybe that is the problem?!

 

The gallery page includes an embeded version of Menalto's Gallery2. As such, it loads its own stylesheets as well (http://www.facesofwar.org/gallery/modules/colorpack/packs/bluebottle/color.css and http://www.facesofwar.org/gallery/themes/matrix/theme.css).

 

However, the global stylesheets (for the site) are loaded afterwards...so they should take presidence.

[gaea 0]

I narrowed the problem down to the javascript stylesheet chooser I was using. I changed to a different one, and now that issue is gone. Ofcourse there now are other problems, but c'est la vie.