CSS - Common Hacks/fixes For Common Bugs On Different Browsers?

I am looking for a reputable source which suggests that CSS hacks are not good practice and should be avoided... Ive tried W3C and W3schools seem to be struggling to find any solid info any help would be appreciated...

Thanks in advance

I've got my hover effects to work in Firefox, Opera , and all...except for IE.

I've done searches for a hack, but can't seem to find anything...

Example

Disregard the layout and dead links, etc.

Any help is appreciated...

Thanks

I've been doing CSS-related coding for a couple years now, and a few years ago when I did my first design I consulted DevShed as well as places like glish and thenoodleincident.

Using my host's Webalizer and AWStats, I noticed that 60% of my users are on IE 6.0, and 35% are on Firefox >=1.0. When I do a redesign over the summer, should I even worry about IE 5.0 or NN4 or any of the hacks that used to drive CSS coders crazy?

hi.

looking for a good book to learn css, which does *not* labor ie6 hacks, since none of my readers use ie6 any longer.

i have read the head first book on xhtml/css, and now looking to expand my knowledge on css to include strong fundamentals, so i can move onto more cutting-edge stuff.

a friend recommended css mastery, but this book was published in feb 2006, and ie7 was released nov 2006, so i don't see how it could be considered applicable to current browsers.

there are so many to choose from.

again i'm looking to learn strong fundamentals, without the need to spend time learning ie6 hacks.

thanks.

Okay, i was just messing around with (X)HTML and CSS and was wondering if there was an easy way to do this.

When viewed in Internet Explorer (6 sp1) it shows fine, the floating "menu" to the left extends the "body" division. But if I view it in FF (1.0.4) then the floating menu doesnt expand the "body" division like it does in IE. I usually fix this with (if a page doesnt have a lot of content) a lot of breaks to even it out. But is there an easier way?

URL for the website so you can see it is below.

(There's really almost nothing on it, just messing around with layout)

http://www.omnimist.com

[edit] looked at it via opera and netscape and they're the same as FireFox, but i want it to look like it does with IE...[/edit]

Hey all,
I am creating a very simple website with stylesheets. My style works perfectly in firefox, and very close in IE and Safari. Also, I havn't worked with stylesheets much so I'm no master and was looking for any critiques on my method of doing things so I might get better. It felt like I had to use far too many negative margins to get things to sit where I wanted, and I am a bit worried if the page is going to break down when resized or on mobile phones.

The URL Is
h t t p : / / s c h e d u l e r . f p i t e s t e r s . com / s i m p l e s t y l e

(no spaces)

If you load it in firefox (3.5.9) it looks just like I want it to.

If you load in Internet explorer, the text in the body area is far to the right. I do not know why that is happening.

If you load in safari, the yellow bar (the breadcrumbs navigation) floats all the way to the left. I don't know why it is doing that.

If anyone could provide some tips on how to fix those issues, and also feel free to offer any other advice to a CSS newb, I would really appreciate it. thank you.

This is where I always run into trouble. I don't know if I'm taking from the right approach but this is what I usually do and I always end up getting frustrated and taking it out of those poor IE users and just removing IE fixes completely.

I usually tackle completely design a site using Firefox and then apply patches as I get around to it ( a round tuit ), but sometimes, a fix will cause other errors and it just ends up in a domino effect until my IE CSS file is bigger than my Firefox CSS and there are still problems. How should I go about this? Should I go to the ghetto with $100 and go around shooting IE users .... or better yet IE development decision makers....?

I found the solution to my IE browser issues. There seems to be a new guide out there with a lot of great comments about it. The last guide I followed had a bunch of people asking for help. Hope this works.

Hi, I have added the following doctype to my XHTML document:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

This fixes several design problems, but my rollovers don't work anymore.
Am I using the right doctype?
here's the site, if you'd like to have a look: http://www.caillouette.com/Utilitrek/eight/services.php

How should I trouble shoot this?

thanks
-S

Good Day all,

I've tried a few different hacks/fixes now to fix my PNG problem in IE6 but none seem to have any effect. I'm starting to wonder if this is fixable. Can anyone provide some insight as to what the problem could be?

I seem to be ok in all browsers except IE6...

029c92a.netsolhost.com/brushes.html

Best,
Colin

Hello, i have a very strange problem with css.

I want to build a horizontal menu, like tabs.
Here is the link of my site. (sorry, its in russian)
http://eai.w2o.ru/default.aspx

Now you can see red border around the header div.

When in layout.css, I remove the border, the header div changes its position (goes down). (in IE and FF (in FF is a little better)) Can you tell me what is my mistake?

How can I do the same without that border?
Thank you very much!

Hello,
I have a problem appearing only in IE8, but I don't seem to find the exact bug and solution.

In this page
http://www.cracowflats.com/index.php/search/show/id/181

there is a Details area (bottom left) where titles have a green background.
For some reason this green background appears in other parts of the page.
In other browsers, the whole page has a white background, as it should.

1) With this code in theme.css

a {color:#62860b; }
h3, h4 { color: #70af1d;}
.color_title { background: #76a637;color:#fff;}
.logo h1 a { color: #62860b !important;}

it appers everywhere and the whole background of the page is green (should be white).

2) when I add an "overflow: hidden;" here

.color_title { background: #76a637;color:#fff; overflow: hidden;}

it gets better, as the main area is white.
But I still have a lot of green on the footer (and tabs).


If I could find out to which bug it refers, it would be easier to find a solution.
Any hint would be appreciated!

Thanks!

Luca

http:// bluedesign.shaheenwebdesign. com/
Username: access
Password: 123456

The slideshow and the welcome letter are next to each other (slideshow on right, letter on left) in Firefox as they should be, but when viewed in IE, the slideshow takes over and the letter is pushed down the page to below the slideshow. Also, my navigation menu links appear higher on the page in IE. I can't figure it out, help please!

Code:

  <div id="mainContent">

       
	<br />
    <div id="wrapper2">
    <div style="position: relative; float: right;">
  	<jdoc:include type="modules" name="left" />
    </div>
    <div id="WelcomeLetter">
    <h1> Force Training And Equipment</h1>
    <p>If you're looking for a wide selection of Guns, Scopes and other Accessories then you've come to Force Training and Equipment. Serving Central PA and beyond since 1989, Kirk knows how to treat you, the customer, and is here to answer any question you may have about weapons. Please look at our Specials and Inventory to see what we have to offer! 
    </p>
    </div>
    </div>

Code:

.oneColElsCtrHdr #mainContent {
	padding: 0 20px;
	background: #ffffee;
}
#wrapper2 {
width: 980px;
margin: 0 auto;
}
#WelcomeLetter {
position: relative;
border: 1px solid #1d4873; 
width: 350px; 
font-family: Arial;
color: #000000;
line-height: 2em;
margin-top: 3px;
padding: 0px 10px 0px 10px;
}

I am redesigning my website at this location: http://www.brovizion.com/newsite.

I have 3 little bugs that are driving me crazy:

1. (http://www.brovizion.com/newsite)(all pages) #mainNav won't put the background color all the way across the div on FF or Netscape. IE does take the dark blue background color all the way accross the page, but I don't know why the other two wont. I like the looks of it both ways, but still want to know why it is behaving weird.

2. (http://www.brovizion.com/newsite/portfolio.html) (IE only) For some reason the table in the middle of the page is pushing the left-most column out its position. This is not happening in FF or Netscape. Am I missing something simple?

3. (http://www.brovizion.com/newsite/contact.html) (IE only) The background color I've set for the fieldset tag is continuing upward approx 1 em. It is not happening in the other 2 browsers? Anyone know a simple hack to fix this?

While we're at it, I know this isn't CSS related, but regarding (http://www.brovizion.com/newsite/contact.html), how come FF is making the input fields for "name" and "email" that light yellow color? Is there a way to get rid of it?

Thanks in advance to anyone who has any ideas on how to fix these items?

I am having a lot of trouble trying to get my new design to work correctly in Internet Explorer 6, which sadly around 15% of my visitors still use

It has been breaking the top navigation bar and instead of having the tabs appear horiziontally it has had them vertically, messing up the header.

It also seems to be breaking the content sections, so that the right content section appears below the left sideblock.

Then there is an annoying bug with a small div I use to separate the menu list on the sideblock.

I really wish I didn't have to support IE6, but so many visitors use it I really can't not. I'm not the best at CSS, but I don't think my code is that buggy as it works correctly in the latest versions of Opera, Firefox & Safari, as well as IE7 & IE8.

The site is he http://beta.the-big-bang-theory.com.

Many thanks for any assistance.