Can I get some stylesheet help?

[balls_deep]

My problem is that my page displays perfectly in firefox but not in IE.

In IE i have a blue border around my gallery photo links instead of a pink border as in firefox.

My text links are all the correct color in both browsers so i'm running in circles tying to find a solution.

If i can't change it does anyone have an opinion on just taking the border off all together since IE is 60% of my traffic?

I think the pink border adds to the design but in IE i think the blue border detracts from the page.

suggestions, solutions, or feedback?

link in the sig

[Satan420]

First imho it looks good both ways. The blue kinda breaks it up a little. Second can you post that part from your css file?

#storycontent a:link img {
border-color: #your color;
}

#storycontent a:visited img {
border-color: #you color;
}

#storycontent a:hover img {
border-color: #your color;
}

Something like that. Anyways you are probably the only one that would notice this, I know that doesn't make any less annoying.

[balls_deep]

http://gothicalternative.com/stylesheet.txt

this theme was pretty bare bones when i got it, most of the additions are mine in the design but i haven't gotten into the stysheet at all.

[Satan420]

IE is ignoring your css with regards to this element. Unless someone else has an idea you might remove the borders altogether. Other than that you could put one of those take back the web links on your site, sorry I couldn't be of more help.

[Hyballs]

Hi balls_deep, How about you do duplicate pages. Ones for IE the others for FF. It means a bit of extra Javascript but it solves the problem.

[balls_deep]

hmm... javascript makes me nervous. I think i may just take out the border all together if i can't change it in the stylesheet.

[upallnite]

If you're posting by hand you can create a new class for the linked images
class="post-img"
a post-img {
color: #ff009a;
text-decoration: none;
}

But this may work as well
Add in some p classes to the style sheet
p img {
padding: 0;
max-width: 100%;
border: 0px;
}

That should do a no border or
Do the a, visited, hover
for which ever option you do

[balls_deep]

i tried both ways and neither seemed to make a difference.

I think i'm just gonna remove the border.

[balls_deep]

this worked


img {
border: 2px solid #ff009a;
}

but i can't turn off the border around my feed button. Grrr...

thanks guys

[zeezyx]

Hey balls

I use IE7 and have just had a look at your page. It loox real good to me. I like the pink borders. It really sets it off. It loox good enough to make me WANT to take a closer look.

Now about your pic; Is that your girl friend and she's real tight and you are real big and you jambed it dri into her butt and went balls deep?

[balls_deep]

[scopemaster]

Browser campatability can be a pain in the ass. I know. As a developer and admin of mainstream and adult sites, I run into frequently enough.

I've built a couple sites for clients that are REALLY picky about the site looking identical in IE and FireFox. 'Identical' is something you won't see because of some of the basic differences between how the Gecko engine (FF) and the IE engine works. But, you can come pretty damned close.

But for those really picky clients, I have a server side script that looks at the user-agent string from the request headers and loads the css file that is right for that browser. I know, it means duplicating some work when creating stylesheets, but it can really pay off with site browser compatability and happy clients.

Keep in mind, my solution requires that you have access to the shell where the site is hosted, and know how to script ( Perl, PHP, ASP, etc ), know your way around a .htaccess file and mod_rewrite. Or if you are using a turnkey solution that does not give you the ability to dynamically load css docs into a template, well .. your best help would be check the following site out in both IE and FF.

http://www.csscreator.com/version1/index.php

That tool has enabled me to band out of CSS pretty quickly that worked well in both IE and CSS.

[Cozy Monica]

Make sure you put a # symbol in front of all your hex colors, or firefox will ignore them.

[EDIT]: hrmmm sorry, I just looked at your css file from your link, and I see that you haven't forgotten any # symbols. Sorry I can't be of more help!

[balls_deep]

Originally posted by Cozy Monica
Make sure you put a # symbol in front of all your hex colors, or firefox will ignore them.

[EDIT]: hrmmm sorry, I just looked at your css file from your link, and I see that you haven't forgotten any # symbols. Sorry I can't be of more help!

hi monica, thanks for the help, firefox was always displaying properly, IE is giving me problems. the img code i posted last has worked. I just wish i knew how to create a a class to not outline my feed button (gif file that takes on the img properties from the css filde. Although this is a minor issue compared to the original problem with the blue IE borders.

thanks everyone

[upallnite]

Originally posted by balls_deep
hi monica, thanks for the help, firefox was always displaying properly, IE is giving me problems. the img code i posted last has worked. I just wish i knew how to create a a class to not outline my feed button (gif file that takes on the img properties from the css filde. Although this is a minor issue compared to the original problem with the blue IE borders.

thanks everyone

You have Two border=0 in the image tag Now...

Add border: 0px; to #feed in the css file.
if that don't work add
class="feed" to the img tag

[balls_deep]

I added

border: 0px;

to the css, no change. I added the img class to the feed button call in my index.php

this is my feed button call.

<div id="feed"><a href="<?php bloginfo('rss2_url'); ?>"><img class="feed" border="0" src="<?php bloginfo('template_url'); ?>/images/feed.gif" width="65" height="65" alt="Feed" /></a></div>

am i calling out the class correctly?

[upallnite]

Make a backup copy of the css file and then try removing all the # symbles before the classes
like: #feed

On some themes that will work.

or if not replace the old one and add this class
a feed {
border: 0px;
}

[balls_deep]

removed # symbols in classes. Major theme corruption.

added the class you listed and still no difference.

so far this is all i have added to the stylesheet I linked earlier in this thread.

img {
border: 1px solid #ff009a;
}

a feed {
border: 0px;
}

I appreciate all the help, if i can't figure it out... it's a minor aesthetic.