gaea
Jan 23 2007, 03:53 AM
The first issue has been resolved. Please goto Post #7 to see the current discussion.This is in reference to: http://facesofwar.org/cms/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: CODE <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: CODE .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.
Reply
BuffaloHELP
Jan 23 2007, 04:26 AM
I recently fixed unwanted line break with H1 tag by using this as part of stylesheet. CODE span {
display: inline;
} give it a try.
Reply
gaea
Jan 23 2007, 04:53 AM
Thanks for the suggestion, but it's a no go.
Reply
BuffaloHELP
Jan 23 2007, 05:51 AM
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 HTML <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 HTML <div id="navigation"><a class="menu" href="#">menu1</a> <a class="menu" href="#">menu2</a> etc And define stylesheet as CODE #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.
Reply
QuickSilva
Jan 23 2007, 06:58 PM
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
Reply
gaea
Jan 23 2007, 09:33 PM
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)
Reply
gaea
Jan 25 2007, 09:27 AM
Thanks again to everyone for your help, it's very much appreciated. This particular issue pertains to: http://www.facesofwar.org/gallery.html 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.cssThe 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.
Reply
matak
Jan 25 2007, 05:22 PM
This is one of you paragrafs i looked at 1024 version.. QUOTE <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?!
Reply
gaea
Jan 25 2007, 06:22 PM
QUOTE(matak @ Jan 25 2007, 05:22 PM)  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.
Reply
gaea
Jan 25 2007, 10:50 PM
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.
Reply
Similar Topics
Keywords : fix sites css layout issues- Css Layout Generator - *free*
- Generate a CSS layout for your site (3)
pretty powerful css layout generator. /smile.gif' border='0' style='vertical-align:middle'
alt='smile.gif' /> and it's freely available online.
http://www.csscreator.com/version2/pagelayout.php QUOTE To create your layout select the
structural elements your site requires (header, footer, columns). Then specify a size in the field
provided and choose a background color from the color chooser below. The color chooser changes
values as you move your mouse along a row. To set a value click on the color row to release click
again. Once the color in the box is th...
Css Layout Help
- need help with my layout (8)
Lists, Unordered And Nested
- some layout tricks (2)
Unordered lists are one of the three list types in (x)html. The others are Ordered Lists and
Definiton Lists. The w3c page of information about lists is here They all behave the same as
(x)html elements, but there are some differences between them. Read the Specification page linked
above to know more that you need to know about them. Only difference between html4 and xhtml is the
tags must be lower-case and closed for xhtml to be valid. Ordered Lists have numbers preceding
them. Paste the following code into a file and display it in your Browser to see the eff...
Css Issues
- What is IE7 doing? (5)
Does anyone know of a quick fix to the css problems in IE7? I am making a website for my college and
all browsers except ie7 are showing it correctly. (Right now I am using a resolution test to fix
this.)...
Basic Css Layout Issue
- Floated Cell with similar height (5)
Okay say I was building a site (what do you know I am!) and I want to use CSS. the problem
being I don't know how to make a floated cell be the same height as another. FOr example CODE
<div id="main"> <div id="left"> just some </br> stuff
over </br> here! </div> <div id="right"> but...</br>
over here </br> I have </br> even more stuff</br> to </br>
display</br> </div> </div> now If I float the left to the left ...
Browser Issues
- CSS and embeded DIVs (7)
Okay so I'm redisigning my site (here: http://d-gression.trap17.com/new/index2.html) and need
help with the CSS that makes the main content. On IE it works which scares me because I'd much
rather have it work on FireFox. So here's the CSS I used: CODE BODY{
background-color:#22324f; background-image:url('./images/bg.gif'); }
DIV.frame { background-color:#07571f; border:solid #000000 2px; width:740px; }
img.banner { } DIV.green { background-color:#6d966c; width:730px; } DIV.menu {
width:145px; backgroun...
Css Layout: Trouble With Ie
- the scrollbar and margin-bottom (4)
I have a site which I'm developping and trying to get a frames-like layout design. But IE does
not propperly show the scrollbox, its hidden behind the fixed divs of the top header and the bottom
footer... Firefox does alright, so If you dont understand what I mean you can check it out here:
http://web.cucea.udg.mx/ineser/alap/test.php Seems like Opera and Safari are doing also good...
And also, the margin of #content (which is the main content area) is not working, becouse it does
not go up above the footer, I don't know what is going on (that rule is ins...
Unordered List Css Layout
- two rows of list and sublist (4)
I have a layout which i want to do fully in CSS. Im having trouble centering the second list, or
sublist which comes from the menu. It doesnt work in IE now, just firefox (Actually the page doesnt
even show on IE, nor Opera, i dont know why). I just want it to appear centered, when im hovering
the main list, not left aligned... Here's the link, youll understand when you see it...
http://web.cucea.udg.mx/cucea/graphix/level5/ I also want to fix the background, (i removed the
background for now) becouse when i hover the sublist items, the background becomes bigge...
Moving Ads With Css Layout On Free Hosting
- CSS help (7)
Can anyone help me how to move top banner from free host? I hear that can be done with css!...
Css How To Use It?
- how do you use it to make a custom layout 4 website? (3)
how you make a custom layout and what is the coding and stuff?...
Css Files, Get Your Css Files Here! [resolved]
- Want a nice CSS layout? (0)
Alright, if anybody wants a CSS layout; I'll make one for you! Just tell me what you want
the background color to be, main font color, and the link colors! Then later in the topic
I'll post them and I'll post the username of the user that requested next to them so you
know which one is yours! So if anyone wants a CSS File; Ask Mike! >_>...
Looking for fix, sites, css, layout, issues, time
|
|
Searching Video's for fix, sites, css, layout, issues, time
|
advertisement
|
|
