CSS - Converting Huge Firefox/mozilla Css To Ie ?

This is just driving me up a wall here. It's been like this for a while, and I never cared b/c I don't use IE. My viewers, however, do, and it's an eyesore.

Link to crappy page

This is a sidebar I have on all the pages. It grabs the latest 10 threads from the forum. Gets the latest 10 additions to the database, and finally gets the top 10 viewed items. As you'll see (specifically in the top entry of the top list (latest news) it messes up the vertical alignment for some reason. AFAIK, my CSS is fine. Again, this problem only exists in IE.

Thanks

Hello all, I recently redesigned my site from table layout to css layout. when viewed in ie it looks good however when viewed in anything else the layout falls apart. the link is:
Benefit Solutions, Inc
Do i need to copy the css to the site? I'm not too sure how to go about getting the help i need. any opinions would be appreciated. thanks in advance

I'm not sure what is causing the extra spaces to the top and bottom area of the images...

Code:

     <div style="margin:0px;padding:0px;background-color: #FF0000;">
       <img src="images/mod_bt2.gif"><br>
       <img src="images/mod_bt1.gif"><br>
       <img src="images/mod_bt7.gif"><br>
       <img src="images/mod_bt6.gif">
     </div>

Greetings... I've looked all around for a solution, and can't find one. Any help that anyone could provide would so greatly appreciated.

My site http://www.baltimoregamers.com displays the div boxes incorectly in Firefox. I am using quite an unusual layout with one big picture as a plate for the entire site...

I then lay div boxes/layers ontop of the plate to position text exactly where I want it to go. It works flawlessly in IE, but displays a too far down and to the right in FF/Mozilla.

I am new to using CSS and I'm sure that something is off somewhere in the code.

Thank in advance for any help.

Feel free to e-mail me he dekay@baltimoregamers.com

i have divs on a page, and the ones appearing on the left don't use any style (style=""), where as on the ones appearing on the right use (style="float: right; clear: right;")

in IE 6 and 7, it creates the needed visuals found in the first attachted file (ie 7.gif).. as is seen, it clears the content so that the end of the divs are always in line, so that the next divs can begin properly in line

in mozilla firefox (mozzila firefox.gif), it does not obey this idea, and simple starts the next divs after the end of the above ones.. you can imagine how problematic this is when some divs on the right contain ALOT of words, that should be inline with the one of the left, etc

any thoughts or anything that could help would be apprciated...

regards

Can anyone tell me whether they have experienced height and overflow problems with FireFox and Mozilla browsers?

Check this out: Test Page.

It looks fine in IE, but not the other two. I've been working on this half the day with no solution. Can anyone help? If the problem can be solved without the use of javascript, that would be preferred.

Thanks,
Darin

Just testing this in different browsers and noticed that the image is shown in the background but does not go to the background-position that is specified. This works for IE. Does anyone know if there is a different way of doing this?

<STYLE type="text/css">
BODY { background-image:url(awesome.gif); background-repeat:no-repeat; background-position:50 220; background-attachment:fixed }
</STYLE>

Thank you for an insight into this little glitch.

Okay here's the problem, I have used px instead of % and I have a feeling it's ruined my whole site because of the fact that users can set their font size custom which TOTALLY messes up margins and things that I have set so precisely.

Here is my site: www.msredimp.000webhost.info

At small it works perfectly and the forms stay all normal, but when it's increased or decreased it totally ruins it.

Is there a way to force the settings in Mozilla to normal size? Or any other way?

Thank you, and sorry for being such a newbie.

Hi,

I'm still new to CSS and have been learning for the past couple of days now. I'm having trouble getting a two-column layout working correctly. Using the faux method, I have a background set so the right-column has a different background color. This works fine. But I'm having trouble placing the elements inside of the container to work correctly.

When the left-column has more content than the right, instead of the container (and thus the background) moving to fit it, the column just extends down by itself. However if the right column has more content than the left, it works correctly. I think it might be because of the float: left, but I'm still new and not exactly sure what the problem is.

The URL to view this is http://serve5.net/extend/ - the CSS is right in the source for you to look at. Could someone point me in the right direction as far as getting the left-column to extend down correctly?

It seems to work fine in Internet Explorer - but I use Mozilla Firefox and it's having this issue. However, in Mozilla, the left-column's background extends to the border fine, but in IE, it overlaps it. What can I do to fix this also?

Thanks.

Oh, to say I'm gutted is under-rated, I thought I had mastered what is CSS design for one of my sites, that was until I decided to test it at work on FireFox, Netscape and Mozilla. For a start the content isn't in the center of the page, and some of the div's seem to be constrained into the right hand column, not sure why.

The page looks perfect in IE. But messed up in the others, I am kicking myself I have left it so late to check.

If any very nice person/people can help me sort this out I would be sooo happy, especially if I can understand why it is so messed up. I'm not really that technical, I'm a graphic designer so if you can help, keep it fairly simple please.

The link is: http://www.gladiatorszone.co.uk/main_new1.shtml

I think it might be a position element wrong or a float?

In mozilla firefox (and possibly other browsers, iv only tested in firefox and IE) the margins of my class="subtitle" div, "escape" my class="content" div. Basically the 10px margin of subtitle acts outside the content div, when it is inside it.

My site is http://rapwars.ace-spades.com and the css is http://rapwars.ace-spades.com/include/stylesheets/rapwars_main.css

If you visit the site you will see that the white area with the "subtitle" text box in, is pushed about 10px down from the flash navigation.

Thank you for any help

i'm working on the following page, and I've now just noticed that it doesn;t look right in IE 6....It looks ok in Mozilla and IE 7 though...

Anyway, if you look at it in IE 6, you'll see the text is HUGE....I tried to alter the font property in the body{} of my CSS (in a conditional comment), but that didn;t do anything...

I'm sure's it's a tiny something or the other somewhere that's making it do that...perhaps my template is conflicting with the blog software...I dunno for sure, and my screen is starting to get fuzzy (meaning i need to take a break), so maybe one of you can pinpoint the problem...

Thanks.

Hi,

Got my validation problem sorted (Thanks jarra) but now my page has a problem with IE6. Well, it had the problem yesterday but I thought I fixed it.

If you view the page in Firefox and Opera the first image is about 10px break away from the text above, however in IE6 it's at least 100px away.

It doesn't matter what image I use or where I put, it's always the first image. When it happened yesterday I reduced the width of the image by 2 pixels and eveything seemed fine.

Is it a CSS problem?

CSS: http://www.planetphillip.com/style.css
Page: http://www.planetphillip.com/index.php

TIA
Phillip

hello all,
i'am at complete loss for now. my site promodivin uses mootools to enrich it by adding slides and accordeon effects.
Works great with IE and FF but using Safari it displays huge blank sections. My text's gone. It's even clearer on the 'Services' tab where I can see some narrow sections. To make the effects work, you may click on the headers and it should collapse the appropriate section.
I believe the issue stems from the ids used only for the purpose of mootools.
Here's an html exerpt from the frontpage:
Code:

<div id="h_toggle1"><a href="#">
<h1>Communication</h1>
</a></div>
<div id="horizontal_slide1">
<ul class="bullet_point">

...

and the titre_toggle.css describing the elements used.
Code:

h3.section {
margin-top: 1em;
}

#vertical_slide1, #horizontal_slide1,
#vertical_slide2, #horizontal_slide2,
#vertical_slide3, #horizontal_slide3 {
background: #E6EAEF;
margin-top: 0;
padding: 10px 10px 0 10px;
border: 1px solid #D5D8DD;
}

#h_toggle1, #h_toggle3, #h_toggle2 {
}

div.marginbottom {
/* Since the Fx.Slide element resets margins, we set a margin on the above element */
margin-bottom: 10px;
}

I'll appreciate any insight.

safari 4.0.3 --> KO
IE 6+ --> OK
FF 3.5 --> OK
mootools 1.2.4
joomla 1.5.15