PDA

View Full Version : IE issue



sonebrate
10-15-2008, 07:22 PM
I have designed and am webmastering this page:
www.alogia.bb.rs
The problem is that in FF everything is fine and works properly, but in IE links are shown with blue borders (instead white as it's supposed to be) and there are white borders between frames (I turned them off while programing the page). So in FF it's like it is supposed to be and in IE it makes these problems. How can I solve this? Thanks.

TheJoshMan
10-15-2008, 08:13 PM
you should VALIDATE (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.alogia.bb.rs%2Fmain.html&charset=(detect+automatically)&doctype=Inline&group=0) first... then fix any issues. Also, I didn't see ANY css in your site which declared any one specific border color for image links... So I am betting that both browsers are using the default. You might want to declare it in css and not leave it up to the browser to decide.

sonebrate
10-16-2008, 10:52 AM
Ok now I'm more confused. Here is the css code:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #1f1f1f;
}
.topmenu {
text-transform: uppercase;
border-left-width: 1px;
border-left-style: inset;
border-left-color: #333333;
border-right-width: 1px;
border-right-style: inset;
border-right-color: #333333;
letter-spacing: 0.25em;
font-weight: bold;
text-align: center;
}
a:link {
color: #ffffff;
text-decoration: none;
}
a:visited {
color: #ffffff;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:active {
color: #FF0000;
text-decoration: underline;
}
.Stylehead {
background-image: url(images/headerbg.jpg);
background-repeat: no-repeat;
background-position: right;
}
td {
font-family: Arial, Helvetica, sans-serif;
color: #CCCCCC;
}


It's used in main menus and submenus. Only difference is that links in submenus are colored #cccccc. What do you mean validate? maybe my english isn't so good so I don't understand that term.

olveyphotodesign
10-16-2008, 12:43 PM
Validation is a means of checking your html code against the standards that the W3C has set. Follow the link Nyne Lyvez provided you and the HTML Validator tells you how to fix your code.

Every browser has a set stylesheet that it ships with. When we do not specify the styles we want, the browser uses it's defaults. It's part of the cascade in CSS. For example the blue link color and purple visited link color are default colors. As a user I can go into my defaults and change them to a nice hot pink or a groovy yellow. Therefore if you don't declare a style for links, this is what your links will look like on your page on my browser.

What this means is if you do not want Firefox or IE to design your page for you, you have to declare the styling in either an external stylesheet, internal stylesheet (located in the head section), or in an in-line style declaration (ex.<p style="color:FFFFFF")>White</p>).

Good Luck!

sonebrate
10-16-2008, 05:54 PM
Ok in my style I have implemented this code for links:

a:link {
color: #ffffff;
text-decoration: none;
}
a:visited {
color: #ffffff;
text-decoration: none;
}
a:hover {
color: #ffffff;
text-decoration: none;
}

The problem is that FF and Opera show everything correctly, but IE shows blue and purple (tested on different computers). I even asked my college professor who has a phd in html but he was confused too. About verifying the code... The frameset code was generated by DW not me (i simply did it in design mode) so I didn't change anything except using command overflow-x: hidden; to disable horizontal scroll but only in individual frames. Nevertheless verifier you provided is showing an error although this command actually WORKS! Thanks for the tips btw.

olveyphotodesign
10-16-2008, 07:05 PM
Try being real specific with IE

<style>

a img {border:none;} // this removes the border, if you want the white border then add the styling you want it to be.
</style>

A second option would be to to use this



a:link, a:visited, a:hover, a img {
color: #ffffff;
text-decoration: none;
border:none;


I think you are battling IE's default style sheet and this should spell it out for IE. How this works is it only applies this rule to <img> tags nested inside of <a> tags. Firefox and Opera have always been friendlier to standards then MSIE.

The other thing is add an alt info to this image. If images are turned off on a viewer's browser all that text info is lost. If it's included in the alt attribute, the information is still accessible.

TheJoshMan
10-17-2008, 12:28 AM
@olveyphotodesign:

I suppose I should have just offered up the solution rather than giving advice to teach someone... It's seeming more and more like people don't want to learn anymore. They'd just rather someone else do it for them. LOL

@sonebrate:

What olveyphotodesign posted should fix the issue. However, IE is a beast to be reckoned with. Meaning, that no matter how much code you write to "fix" IE... You are undoubtedly going to be faced with another obstacle which resulted from that fix. It is the nature of the beast which is IE.

Have fun!

sonebrate
10-17-2008, 10:20 AM
Thank you both. I will try this.