Links not working

mistaya123 · January 4, 2011, 9:36am

Hi

Here is the header code.

<!-- ----------- HEADER ---------- -->
	<div id="header">
	
		<!-- Logo Start -->
		<div class="logo"><img src="images/logo.png" border="0" width="288" height="48" />
			<h1 class="tag_line">Tag Line Goes Under Here</h1>
		</div>
		<!-- Logo End -->
		
		
		
		<!-- Shopping Cart Start -->
		<div id="cart">
			<div class="cart_bg_top"></div>
			<div class="cart">
				<img src="images/shopping_cart.jpg" border="0" width="57" height="51" class="shopping_cart"  />
				<div class="cart_text">Cart:<a href="#">2 items</a></div>
				<div class="cart_text">Cart:<a href="#">2 items</a></div>
				<!--<div class="cart_text">Total:<a href="#">$200.00</a></div>-->
				
				<div id="cart_buttons">
					<a href="#" class="cart_button">View Cart</a>
					<a href="#" class="cart_button">Checkout</a>
				</div>
			</div>
			<div class="cart_bg_bottom"></div>
		</div>
		<!-- Shopping Cart End -->
		
	</div>
<!-- ----------- HEADER END---------- -->

Look quite messy here. But is not so in dreamweaver. Here is the css:

/*=========== HEADER =========*/
#header {
width:100%;
position:relative;
margin:10px auto 0 auto;
background:red;
}

.logo {
margin:20px 0 0 20px;
float:left;
}

.tag_line {
color:#FFFFFF;
font-weight:normal;
font-size:1.2em;
text-align:right;
}

#cart {
position:relative;
float:right;
width:205px;
background: green;
overflow:hidden;
}

.cart {
background:url(../images/cart_bg.png) 0 0 repeat-y;
width:205px;
overflow:hidden;
}

.cart_bg_top, .cart_bg_bottom {
background:url(../images/cart_bg_top.png) 0 0 no-repeat;
height:8px;
width:205px;
}

.cart_bg_bottom {
background:url(../images/cart_bg_bottom.png) 0 0 no-repeat;
}

.shopping_cart {
margin:0 0.7em 0 1.7em;
float:left;
}

.cart_text {
color:#a7540a;
font-size:1.2em;
}

.cart_text a:link {
color:#FFFFFF;
text-decoration:none;
font-size:1em;
padding-left:0.5em;
}


.cart_text a:visited {
color:#FFFFFF;
text-decoration:none;
font-size:1em;
padding-left:0.5em;
}

.cart_text a:hover {
color:#FFFFFF;
text-decoration:none;
font-size:1em;
padding-left:0.5em;
}

.cart_text a:active {
color:#FFFFFF;
text-decoration:none;
font-size:1em;
padding-left:0.5em;
}

#cart_buttons {
clear:both; 
padding:0.5em 0 0 0;
}





a.cart_button {
background:url(../images/cart_button.png) 0 0 no-repeat;
width:86px;
height:22px;
float:left;
text-align:center;
color:#FFFFFF;
text-decoration:underline;
font-variant:small-caps;
font-size:1em;
font-weight:bold;
margin-left:1em;
}

a.cart_button:visited {color:#00FF00;}  /* visited link */
a.cart_button:hover {color:#FF00FF;}  /* mouse over link */
a.cart_button:active {color:#0000FF;}  /* selected link */



/*
a.cart_button:hover {
color:#000000;
text-decoration:none;
}*/

The problem is that the “view cart” and “checkout” buttons are not acting as links. Although I have inserted them as links.

Why is this so, please?

system · January 4, 2011, 9:38am

What are they acting like?

mistaya123 · January 4, 2011, 9:48am

like a simple image. When I hover my mouse over them, the arrow does not change into a hand.

Stevie_D · January 4, 2011, 10:00am

I can’t see any reason for them not working, from the snippet you’ve given us. Can you give us a link to an actual live page, so we can see if there’s anything else that could be interfering?

mistaya123 · January 4, 2011, 10:08am

Here is the link:
test site

system · January 4, 2011, 10:17am

I think there must be something else in your code that you haven’t posted that is causing the problem. I copied and pasted your posted html and css into a html file and the links work ok in my IE8 - the cursor changes to a hand when I hover over the links.

xhtmlcoder · January 4, 2011, 10:17am

Get rid of the adjacent hyphens strings — within the HTML comments it is NOT a sensible idea. If you have to have use decoration with HTML comments then choose <!– == –> so not to screw the browsers up as the amount of hyphens will trigger on/off states.

They are acting like links from the example you gave us. However, without the rest of the page and images or noting the browser you are having the issue with. It’s too hard to replicate your problem. I would suspect it is an overlapped item though in the full page.

Edit: I see you have now given a page that is displaying the issues. I might come back later if I have time and look further at the problem.

mistaya123 · January 4, 2011, 10:30am

The page has been done only so far. The rest has not been done yet.
The comments were for the client who will to understand the code and change accordingly.

I’ll check the page again with hyphens removed.

Thanx

xhtmlcoder · January 4, 2011, 1:32pm

At the moment your #top_menu is overlapping the hyperlinks and most of the cart you can see if you give it a background colour; it stretches the full page width.

Perhaps if you give the: #cart a z-index of something like 2 it will appear in front of the #top_menu allowing you to fully access the hyperlinks.

system · January 4, 2011, 2:47pm

<mythbusters>Well there’s your problem…</mythbusters>

Taking a closer look at your ‘test site’ there are a LOT of problems with the code – that you are using dreamweaver is probably a contributing factor to those problems; as Dan used to say the only thing about Dreamweaver than can be considered professional grade tools are the people promoting it’s use.

From the top of the markup…

<broken record>Is this a NEW page? If so why is it pre-op? Transitional is for supporting old/outdated coding techniques, NOT for building new websites!</broken record>
No media types on your CSS LINK tags
You do NOT have complex enough a layout to be needing IE conditional nonsense, and that you are targeting MULTIPLE versions just further compounds the difficulty in maintaining such a page…
Your comment placement runs the risk of tripping rendering bugs in both IE and FF.
Ease up on the DIV – you’ve got about a dozen classed DIV for NOTHING in there. Likewise you are saying the tagline is the parent heading for all content on the page? That seems a little off…
You have NOTHING on the page that should be warranting the use of alpha .png, so get rid of that bloat.
you fail to close HEAD

Moving on to the CSS

That is a ridiculous reset – if it starts messing with anything more than padding/margins and border on two elements, it’s probably too big to bother with.
85% of 85% font? No wonder the sizing is so wierd.
generated content for WHAT? Some crappy broken float clearing method? One step removed from that clearfix nonsense…
presentational classes of .left and .right have no real place if practicing separation of presentation from content. Say what things ARE not how they appear. AT that point you might as well go back to using HTML 3.2
font-size changes without re-declaring line-height is the fast track to broken layouts cross browser…

I could go on for a while, so I’ll stop here. In any case as I often say CSS is only as good as the markup it is applied to – and the markup you have is problematic.

The code should probably look a little more like this:


<!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"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Lorem Ipsum Title
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Company Logo<br />
		<small>Tag Line Goes Here</small>
		<span><!-- image replacement --></span>
	</h1>
	
	<div id="cart">
		<div><div><!-- image sandbag --></div>
			Cart:<a href="#">2 items</a><br />
			Cart:<a href="#">2 items</a>
		</div>
		<a href="#">View Cart</a>
		<a href="#">Checkout</a>
	<!-- #cart --></div>
	
	<ul id="mainMenu">
		<li><a href="#">Home</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Contact Us</a></li>
		<li><a href="#">Blog</a></li>
	</ul>
	
	<form id="searchBar" action="#" method="post">
		<fieldset>
			<div class="searchLabelStack">
				<label>Search...</label>
				<input
					type="text"
					class="search"
					value="Search..."
				/>
			</div>
			<input
				type="image"
				src="images/searchbutton.png"
				alt="Go"
				class="submit"
			/>
		</fieldset>
	</form>
			
	<ul id="login">
		<li><a href="#" class="login">Login</a></li>
		<li class="last"><a href="#" class="register">Register</a></li>	
	</ul>
	
	<div id="specialOffers">
		<h2>Special Offers:</h2>
		<ul>
			<li><a href="#">Vivamus ac risus felis, sit amet eleifend enim.</a></li>
			<li><a href="#">Mauris ante dolor, porta sed euismod vel, ultricies placerat diam.</a></li>
			<li><a href="#">Curabitur a quam quis au</a></li>
		</ul>
	<!-- #specialOffers --></div>
	
<!-- #pageWrapper --></div>

</body></html>

Which would/should provide all the hooks needed for what you have for a layout so far. I have time later I’ll toss together some example CSS for that. (No promises on that today, I’ve got a full plate of work ahead of me)

You should REALLY consider kicking Dreamweaver to the curb.

mistaya123 · January 5, 2011, 4:16am

what do you use in place of dreamweaver? I thought it was the easiest to handle.

Stevie_D · January 5, 2011, 11:41am

Notepad++

Any text editor will do the job perfectly well, but some offer more features that will help you manage HTML files.

mistaya123 · January 6, 2011, 1:02am

@Stevie D: Ic. Thanx. I’ll try notepad from now on.

@deathshadows60: thanx for all the trouble of writing the code. Im trying to correct my code according to your points.

I have put in a horizontal drop downmenu for the left side categories. I have not used used javascript for it except for a little script in the html. (you can ignore the javascript files in js folder. I’ll delete them later)

The sub menu appears to be working fine in other browsers. but in ie, once i hover my mouse over the link, the sub menu is displayed, and it stays displayed. it does not disappear when i move the mouse away from the link.

Could you please tell me how I can correct whatever problem it is?

mistaya123 · January 6, 2011, 1:03am

Sorry. the link is: test site

mistaya123 · January 6, 2011, 5:16am

ok dont bother.
I have changed the menu.