Html links and Css link rollover styles? Need some help?

[Andy92]

Hi there,

I have another problem yet again. (sorry).

Ok, if you go to http://www.allsortshop.com/portfolio/allsortshop/ you will see a green box (soon to be an image along with others). When you roll over the green box then text underneath underlines itself.

Now weather you click on the box or the text its all one big link that will go to the home page. So click and it will go to the home page. Its all in a div tag called mini_rectangle.

Now in my css style sheet i have applied a link style to all the text in the mini_rectangle tag. Have a look below...

#mini_rectangle a:link{
color: #FF6600;
text-decoration: none;
}
#mini_rectangle a:visited{
text-decoration: none;
color: #FF6600;
}
#mini_rectangle a:hover{
color: #000000;
text-decoration: underline;
}

The link should be orange, but its not?

Heres the html code for the mini_rectangle div tag in the html...

<div id="mini_rectangle">
<a href="/">
<b class="rectangle"><img src="../../../images/minirectangle/test.jpg" width="145" height="42" border="0"/></b>
<div class="rectangle_title">Testing</div>
</a>
</div>

Now the a href is around both the rectangle class and the rectangle_title class. Shouldn;t the a href be like this to make the rollover colors in the css style sheet work...

<div class="rectangle_title"><a href="/">Testing</a></div>

But if i do this there is an a href inside another a href and it mucks up?

How do i do this and make the link settings i put in the css stylesheet work?

[_Aerospace_Eng_]

For starters make your page valid. http://validator.w3.org

[Andy92]

Ok, could you tell me what that means and what i have to do?

[_Aerospace_Eng_]

Run your page through the validator. Here I made it easier for you. You have 16 coding errors (click me) (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.allsortshop.com%2F) that need to be fixed. I also suggest you get another browser to start testing your pages in. Your site doesn't look too great Firefox (http://www.getfirefox.com).

[Andy92]

Ok thanks.

My friend uses opera and he says it doesn't look too good either.

How can i make my site display perfectly in ALL BROWSERS?

[Kravvitz]

If by "all browsers" you're including ancient ones like Netscape 4 and IE4, then you may not be able to and shouldn't bother to try anyway.

Also, since very few people will look at a web page in multiple browsers at the same time, making a page be pixel perfect in multiple browsers is a waste of resources. It is quite possible to get layouts to display very nearly the same in modern browsers.

[_Aerospace_Eng_]

Ok thanks.

My friend uses opera and he says it doesn't look too good either.

How can i make my site display perfectly in ALL BROWSERS?
Well the first step is making it valid. Code for a good browser like Firefox or Opera and then tweak for IE. Both Firefox and Opera are free to download.

[Andy92]

Do you mean tweak the html document or the css style sheet?

Also here is my css style sheet vaild...

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.allsortshop.com%2Fcss%2Fstyle.css

Also when it says things like...

Line : 33 (Level : 1) You have no background-color with your color : .text3

Does this mean i need to put this in the css style sheet under text 3...

background-color: none;

Then it will stop showing this error message?

[_Aerospace_Eng_]

Its just a warning. Its making sure you understand that text colors and background colors don't clash. I meant tweak either html or css. Sure valid CSS is okay but if the HTML isn't valid, you can't expect the CSS to work as intended.

[Andy92]

OK,

So shall i put the background color to none in...

Line : 33 (Level : 1) You have no background-color with your color : .text3

???

Also, if i tweak all the html, does this mean that my site will display in most browsers fully like it is in internet explorer at the moment?

Also is there any way to put a hyperlink inside of a hyperlink in html?

[_Aerospace_Eng_]

background-color:inherit; will make the warning go away however be careful with this as it might get the background color from the parent element. Like I said make your site look good in Firefox or Opera and then tweak for IE. You don't even know what you have to tweak yet so I can't say if it will look good in IE or not as there are many bugs that you probably aren't even aware of. Code Firefox, make changes to look good in IE. And no there is no way to put a hyperlink inside of a hyperlink. Why would you want to do that?

[Andy92]

Ok, well i made a copy of one of my pages here...

http://www.allsortshop.com/test.php

Then i made a copy of my css sheetand the test.php runs off it here...

http://www.allsortshop.com/test.css

Then i ran the validation on them, cleared it up and now it says that the css is fine and the html is fine.

I then go to opera and firefox, load up allsortshop.com/test.php and it is still displaying it all wonky and out of place?

What do i have to do to make it display in both browsers!!!?:confused: :confused:

[Andy92]

Is it the css or the php that is making it not display properly?

Also is there some sort of thing where it can highlight html code that wont work in firefox or opera?

[Kravvitz]

It's not that the code isn't working in Firefox and Opera -- it is. It's that IE is buggy and doesn't display it correctly. You should design/code for Firefox and Opera and then make changes where needed for IE.

Read these:
Writing Efficient CSS (http://www.communitymx.com/content/article.cfm?cid=90F55)
Efficient CSS with shorthand properties (http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/)

[Arbitrator]

So shall i put the background color to none in...

Line : 33 (Level : 1) You have no background-color with your color : .text3

???Just to clarify, if you look above that message when validating your CSS, it should say something like "warnings". Warnings just indicate possible problems; generally, you can safely ignore them. Warnings don't indicate that your code is invalid either; that would be under "errors".

In this case, you're being warned about having something like black text on a dark gray background because you set one but not the other. I believe the problem mainly arises when someone defines a custom style sheet like making their default hyperlink colors black instead of blue; the possibility is out there but most people don't alter their browser's defaults (or know how).

[_Aerospace_Eng_]

Try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<base href="http://www.allsortshop.com/" /><!--can be removed-->
<style type="text/css">
html, body {
margin:0;
padding:0;
background:#F5F4F3;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#000;
}
body {
padding:10px 0;
}
a, a:link, a:visited {
color: #F90;
background-color:inherit;
text-decoration:none;
}
a:hover {
color: #F60;
background-color:inherit;
text-decoration: underline;
}
#container {
width:800px;
background:url(images/css/middle.jpg) repeat-y;
margin:auto;
}
#header {
background:url(images/css/top.jpg) no-repeat;
padding-top:12px;
}
#header img {
display:block;
margin:auto;
border-bottom:3px solid #F00;
}
#top_nav {
background:#000;
padding:0 5px;
margin:0 12px;
text-transform: uppercase;
list-style:none;
height:25px;
line-height:24px;
}
#top_nav li {
display:inline;
}
#top_nav li a, #top_nav li a:link, #top_nav li a:visited {
color:#39C;
text-decoration: none;
border-bottom:2px solid #000;
margin-left:12px;
background:#000;
}
#top_nav a:hover{
color:#C03;
background:#000;
border-bottom:2px solid #C03;
}
#follow_me {
color:#666666;
background-color:inherit;
padding:4px 10px;
text-transform: capitalize;
margin:0 12px;
}
#follow_me a, #follow_me a:link, #follow_me a:visited {
color:#F60;
text-decoration:none;
background-color:inherit;
}
#follow_me a:hover {
text-decoration:underline;
}
#left_col {
width:160px;
float:left;
margin:0 10px 0 14px;
display:inline;
}
#left_col ul {
margin:0 0 10px 0;
padding:0;
list-style:none;
}
#left_col ul li {
padding-bottom:1px;
border-bottom:1px solid #999;
}
#left_col ul li a, #left_col ul li a:link, #left_col ul li a:visited {
color:#000;
text-decoration:none;
background-color:inherit;
}
#left_col ul li a:hover {
color:#F60;
}
.text_menu_title {
color: #006699;
font-size: 140%;
font-weight: bold;
margin:0;
padding:0;
}
#left_col ul.text_menu_ads li {
border-bottom:0;
}
#page_content {
width: 590px;
float: right;
margin-left: 0px;
margin-right: 12px;
text-align: left;
}
.page_title_text{
background: #0CF;
font-size: 150%;
font-weight: bold;
color: #069;
border-bottom:2px solid #000;
margin:0 0 5px 0;
padding:0 0 2px 0;
}
#footer {
background:#F5F4F3 url(images/css/bottom.jpg) no-repeat;
padding-top:12px;
clear:both;
color:#000;
width:800px;
margin:auto;
}
#footer .b_left{
width:200px;
float:left;
padding-left:5px;
}
#footer .b_right{
width:550px;
float:right;
padding-right:5px;
text-align:right;
}
.clear {
clear:both;
font-size:1px;
line-height:0px;
height:0;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="images/banners/stuff.jpg" width="776" height="140" alt="" /></div>
<ul id="top_nav">
<li><a href="/">home</a></li>
<li><a href="/about">about</a></li>
<li><a href="/portfolio">portfolio</a></li>
<li><a href="/stuff">stuff</a></li>
<li><a href="/resources">resources</a></li>
<li><a href="/contact">contact</a></li>
</ul>
<div id="follow_me"><a href="/">Home</a> &gt; Stuff:</div>
<div id="left_col">
<h1 class="text_menu_title">Stuff:</h1>
<ul>
<li> &raquo; <a href="/stuff/toons">Toons</a></li>
<li> &raquo; <a href="/stuff/games">Games</a></li>
<li> &raquo; <a href="/stuff/polls">Polls</a></li>
<li> &raquo; <a href="/stuff/links">Links</a></li>
</ul>
<h1 class="text_menu_title">Adverts:</h1>
<ul class="text_menu_ads">
<li> &raquo; <a href="http://www.starlinkuk.co.uk">Starlinkuk Hosting</a></li>
<li> &raquo; <a href="http://www.things4.co.uk">Things 4 / Great Gifts</a></li>
<li> &raquo; <a href="/community/advertise">Advertise Here?</a></li>
</ul>
</div>
<div id="page_content">
<h1 class="page_title_text">Stuff:</h1>
Coming soon!
</div>
<div class="clear">&nbsp;</div>
</div>
<div id="footer">
<div class="b_left">&copy; Allshortstop 2005-2006</div>
<div class="b_right">Insert tag element</div>
</div>
</body>
</html>
It works fine in IE and FF. Study it, learn from it.

[Andy92]

Ok thanks Kravvitz (http://www.codingforums.com/member.php?u=31932),

It's not that the code isn't working in Firefox and Opera -- it is. It's that IE is buggy and doesn't display it correctly. You should design/code for Firefox and Opera and then make changes where needed for IE.



1) What do i need to alter? the html or css?

2) How do u make it work for firefox and opera, and then edit it for internet explorer? Do you have to have some sort of extra css stylesheet for internet explorer?

Also _Aerospace_Eng_ (http://www.codingforums.com/member.php?u=18194),

Did you get that code from my css style sheet?

And you have put the css in the html code. Couldn't i just put it in a css document and let the html refer to it?

[_Aerospace_Eng_]

Ok thanks Kravvitz (http://www.codingforums.com/member.php?u=31932),




1) What do i need to alter? the html or css?

2) How do u make it work for firefox and opera, and then edit it for internet explorer? Do you have to have some sort of extra css stylesheet for internet explorer?

Also _Aerospace_Eng_ (http://www.codingforums.com/member.php?u=18194),

Did you get that code from my css style sheet?

And you have put the css in the html code. Couldn't i just put it in a css document and let the html refer to it?
1) You might have to alter both, don't know.
2) Code correctly, understand how the box model works (look that up, tons of resources). You can use an extra IE only stylesheet. Look into conditional comments (http://www.quirksmode.org/css/condcom.html) though if you don't need an extra stylesheet, don't use it, most of the time its a few lines of CSS that can be added but that all depends on how you make your stylesheet. If you make it without understanding the common IE bugs you are going to have problems in IE.

And yeah I got most of the CSS from your stylesheet. I altered some margins and padding. Yeah you can put it in an external stylesheet but for ease of testing I made it embedded. I suggest you head over to www.positioniseverything.net to read and understand about CSS browser bugs, more specifically this page http://www.positioniseverything.net/explorer.html. Some of the most common bugs I've experienced in IE are the double margin bug, the peekaboo bug, and the 3px jargon bug. Those tend to be common in IE when it comes to bugs.

[Andy92]

Ok, so in all of my <head> tags on my html pages, for the stylesheets should i put the below for opera and firefox etx...

<link href="/css/style_other.css" rel="stylesheet" type="text/css" />

And the below for internet explorer...

<!--[if IE]>
<link href="/css/style_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

So in my head tag will look like this on every page...

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Allsortshop Today - News - Design - Games - Toons - Resources - Msn</title>
<link href="/css/style_other.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/css/style_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>

Will this work though? Will internet explorer automatically pick up the style_other or will it detect the conditional comment tags and use the style_ie stylesheet?

And will all the other browsers except for internet explorer pick up the style_other sheet?

Also is there conditional comments for firefox and opera etc?

And what other browsers are there?

[_Aerospace_Eng_]

I think you are looking into this too much. Just code for Firefox. Make it look good in Firefox. If it looks good there chances are it will look good in Opera. Yes IE is the only browser that understands conditional comments. To other browsers they appear as normal HTML comments. IE will use both the original stylesheet and the one in the conditional comments. The IE stylesheet should only have the rules that need to be overridden from the original stylesheet. No there aren't conditional comments for Firefox or Opera but you shouldn't need the if you code correctly which is why valid code is ALWAYS good. For PC you have Opera, Firefox, IE, and Netscape, and Konqueror. For Mac, you have Safari, Netscape, Opera, Firefox and still some Macs have IE5. IE5 was abandoned 3 years ago by Microsoft. Your target audience will be the factor on what browsers you should code for. I think thats all I can tell because the things we are telling you are getting redundant.

[Andy92]

Ok i will have a go at fixing the css for firefox and then i will make an ie css sheet aswell.

Also is this what you mean by overridden...

In the style_other.css document internet explorer and all other browsers will read this bit...

#body_stuff .seperator{
height: 10px;
width: 100%;
border-top-color: #000000;
border-top-style: solid;
border-top-width: 1px;
margin-top: 5px;
}

But then in the style_ie.css if i write this and change the width. Like...

#body_stuff .seperator{
height: 10px;
width: 50%;
border-top-color: #000000;
border-top-style: solid;
border-top-width: 1px;
margin-top: 5px;
}

It will read the first one as the width being 100%, but then when it reads the second one (which is its own stylesheet), will it overwrite the width from 100% to 50% ?

[_Aerospace_Eng_]

Yeah except if the styles are going to be the same no need to put them in the IE stylesheet. Since you just want to change the width do this
#body_stuff .seperator{
width: 50%;
}

[Andy92]

Ok,

I will have a go with it and let you know how i get on.

Also i am doing a w3c validator check on my home page and for images it says you error you need to put an alt tag in your images.

Ive done this and just randomly put alt="okok" and it doesn't do anything?

But what is alt suppost to do?

[Arbitrator]

alt attributes, for alternative text, are supposed to provide an informational substitute for images in the event that they can't be loaded. Typically, they also provide this information before the image begins to load so that the user knows what the image (that hasn't displayed yet) is about. Internet Explorer also renders this attribute as a tooltip when the title attribute is more appropriate for that instead; I believe Microsoft is removing support for that in Internet Explorer 7, however.

If the image isn't informational (i.e., graphs, photos, screenshots) but instead presentational (i.e., header image, backgrounds), then it makes sense to load your images using CSS instead, also meaning that you need not have the alt attribute specified. If you can't or choose not to load your presentational images via CSS, then you should just leave the alt attribute blank for that image, though you're still required to have it on each img tag. A CSS-based example:

<style type="text/css">
  #header {width: 800px; height: 150px; background: url("header.png") no-repeat;}
</style>

<div id="header"></div>

Resources: Ian Hixie's Evil Tests: Alternative Text (http://www.hixie.ch/tests/evil/mixed/IMGalt.html); Ian Hixie's Alternative Text Mini-FAQ (http://www.hixie.ch/advocacy/alttext).

[Andy92]

Ok i get you now.

Thanks!

[Andy92]

Ok, i have tried to make it work in other browsers and it nearly works appart from this one thing.

Have a look at my other post describing the problem...

http://www.codingforums.com/showthread.php?t=89755

:)