Jump to content
xisto Community
Sign in to follow this  
gaea

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

Recommended Posts

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 by gaea (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.