PDA

View Full Version : Hyperlink styles applied to navigation links not showing in browser window


ashmic
04-24-2011, 01:54 AM
I created a hyperlink style in my CSS for the links in my navigation bar and added the class to my html document. When I click "Live View" in Dreamweaver CS4 the links in my navigation bar work as I had expected but when I open the html page in my Internet Explorer browser the link styles that I applied to the navigation bar do not work at all. The only recognition it has of a link is that it shows a pointing hand and at the bottom it shows a dialog box with the html link. Also I opened it in Firefox and only a few of the links worked properly (meaning the hyperlink styles were applied in the browser window) but then some had the same issues as in Internet Explorer where the pointer hand appeared only with no styles applied. I know it's not a ActiveX issue because I allowed blocked content in the Internet Explorer browser. So it must lie somewhere in my CSS or HTML coding. I guess I'm just wondering if any of you have had similar problems in the past and could maybe point me in the right direction as to the source of the problem? I would appreciate any and all advice. If you need further information or clarification please let me know. Thank you!

Corrosive
04-24-2011, 09:35 AM
You are going to have to give us a link to tell what is going on.

ashmic
04-25-2011, 02:52 PM
You are going to have to give us a link to tell what is going on.

Hi Corrosive,

Here's code from one of the (many) pages I am having hyperlink styling problems with.

<!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>Our List of Services - D'organizer Event Planning Services -Full Service, Family Owned &amp; Operated Special Event Company - Melbourne, FL</title>
<link href="dorganizersite.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
p.MsoNoSpacing {margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
}
a:link {
color: #000;
text-decoration: none;
font-size: 12px;
}
a:visited {
color: #000;
text-decoration: none;
font-size: 12px;
}
a:hover {
color: #ffffff;
text-decoration: none;
font-size: 12px;
}
a:active {
text-decoration: none;
color: #33f;
font-size: 12px;
}
body,td,th {
font-size: 12pt;
}
a {
font-size: 14px;
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
-->
</style>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">
<h2 align="center"><img src="logo/dorganizer_logo.png" width="407" height="158" alt="D'organizer Event Planning Services" /></h2>
<div align="center">
<!-- end #header -->
<span class="Proportional"><a href="index.html" class="navbar">Home</a> | <a href="services.html" class="navbar">Services</a> | <a href="clients.html" class="navbar">Clients</a> | <a href="photogallery.html" class="navbar">Photo Gallery</a> | <a href="referrals.html" class="navbar">Referrals</a> | <a href="contactus.html" class="navbar">Contact</a></span></div>
</div>
<div id="mainContent">
<h1 align="center"> Services </h1>
<p align="center" class="Default">Whether it is twenty people or two hundred, whether you're turning forty or getting married, whatever the theme, whatever the culture...we do it all! We plan, set up, clean up, serve, pour and cook. We execute from start to finish making sure your event is spectacular.</p>
<p align="center" class="MsoNormal" style="LINE-HEIGHT: normal; font-size: 9pt;">Our services include but are not limited to:</p>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<p align="left" class="MsoNormal" style="LINE-HEIGHT: normal; MARGIN-LEFT: 20pt; font-size: 9pt;"><span style="font-size: 10pt"> • </span>Corporate Events</p>
<p align="left" class="MsoNormal" style="LINE-HEIGHT: normal; MARGIN-LEFT: 20pt; font-size: 9pt;"><span style="font-size: 10pt">•</span> Weddings</p>
<p align="left" class="MsoNormal" style="LINE-HEIGHT: normal; MARGIN-LEFT: 20pt; font-size: 9pt;"> <span style="font-size: 10pt">•</span> Baby Showers</p>
<p align="left" class="MsoNormal" style="LINE-HEIGHT: normal; MARGIN-LEFT: 20pt; font-size: 9pt;"> <span style="font-size: 10pt">•</span> Bridal Showers</p>
<p align="left" class="MsoNormal" style="LINE-HEIGHT: normal; MARGIN-LEFT: 20pt; font-size: 9pt;">• Birthday Parties</p>
<p align="left" class="MsoNormal" style="LINE-HEIGHT: normal; MARGIN-LEFT: 20pt; font-size: 9pt;">• Fundraisers</p>
<p align="left" class="MsoNormal" style="LINE-HEIGHT: normal; MARGIN-LEFT: 20pt; font-size: 9pt;">• Bar/Bat Mitzvahs</p>
<p align="left" class="MsoNormal" style="LINE-HEIGHT: normal; MARGIN-LEFT: 20pt; font-size: 9pt;">• Church Events</p>
<p align="left" class="MsoNormal" style="LINE-HEIGHT: normal; MARGIN-LEFT: 20pt; font-size: 9pt;">• Retirement Parties</p>
<p align="left" class="MsoNormal" style="LINE-HEIGHT: normal; MARGIN-LEFT: 20pt; font-size: 9pt;">• Sweet Sixteen Parties</p>
<p align="left" class="MsoNormal" style="LINE-HEIGHT: normal; MARGIN-LEFT: 20pt; font-size: 9pt;">• Anniversaries</p>
<p align="left" class="MsoNormal" style="LINE-HEIGHT: normal; MARGIN-LEFT: 20pt; font-size: 9pt;">• Quinceaρeros</p>
<p align="left" class="MsoNormal" style="LINE-HEIGHT: normal; MARGIN-LEFT: 20pt; font-size: 9pt;">• Funerals</p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
<p align="center" class="MsoNormal" style="LINE-HEIGHT: normal; MARGIN-LEFT: 20pt; font-size: 9pt;">Whatever the milestone in your life may be, let us help you celebrate with style. No event is too small or too elaborate.</p>
<p class="MsoNoSpacing" style="border:none;padding:0in;">
<!-- end #mainContent -->
</p></div>
<div id="footer">
<h5 align="center">© 2011 D'organizer Event Planning Services</h5>
<h5 align="center">Logo &amp; Site Design by: <a href="http://www.ashleysperrydesigns.weebly.com" target="_blank">Ashley Sperry Designs</a></h5>
<!-- end #footer -->
</div>
<!-- end #container --></div>
</body>
</html>

ashmic
04-25-2011, 02:53 PM
That was the HTML code. Here's the CSS as well:

@charset "utf-8";
body {
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}
.oneColFixCtrHdr #container {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #ffffff;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtrHdr #header {
background: #ffffff;
border-top: 0px solid #0000000;
border-bottom: 2px solid #de52b4;
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
font-size: 12px;
}
.oneColFixCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #ffffff;
font-size: 7pt;
text-align: left;
font-weight: normal;
}
.oneColFixCtrHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DE52B4;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
font-size: 11px;
}
.oneColFixCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.oneColFixCtrHdr #container #footer h5 a {
font-size: 12px;
}
.oneColFixCtrHdr #container #mainContent p {
font-size: 14px;
color: #000;
}
#h {
font-size: 14px;
}
.oneColFixCtrHdr #container #mainContent p {
font-size: 14px;
}
.oneColFixCtrHdr #container #mainContent p {
font-weight: regular;
}
.oneColFixCtrHdr #container #mainContent h1 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
font-style: normal;
color: #000;
font-weight: normal;
text-align: center;
}
.oneColFixCtrHdr #container #maincontent h1 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: normal;
color: #000;
text-align: center;
}
.spacers {
font-size: 14px;
}
.headline {
font-size: 16px;
color: #de52b4;
text-align: left;
}
.navbar:link {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
}
.navbar:hover {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
color: #de52b4;
text-decoration: none;
}
.navbar:active {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
color: #F39;
text-decoration: none;
}
.navbar:visited {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
}
.mywebsite:active {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #33f;
text-decoration: none;
}
.mywebsite:hover {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #ffffff;
text-decoration: none;
}
.mywebsite:visited {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
}
.mywebsite:link {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
}

Thanks for the help. I appreciate it!

d a v e
04-25-2011, 02:58 PM
a link, not code please.

oh and you shouldn't have any office styles in your css
i.e.
"p.MsoNoSpacing {margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
}"

ashmic
04-25-2011, 08:47 PM
a link, not code please.

oh and you shouldn't have any office styles in your css
i.e.
"p.MsoNoSpacing {margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
}"

Hi dave,
Thanks for your reply. Ok so no code, how do I add a link? I don't understand what exactly you are wanting and how I do it. Can you kindly show me? Thanks!

So you're saying I should take out all the CSS styles that look like the above? Will that mess up my CSS styles? Is there another way to do what I want to do without using "office styles"?

Thanks guys for your help. I'm still quite the newbie when it comes to Dreamweaver & designing sites. I appreciate any and all help.

ashmic

d a v e
04-25-2011, 09:58 PM
that Mso bit is from office so you've pasted something in from office (word or somewhere) directly, instead of via notepad (copy and paste into notepad, cut from notepad, paste into DW)

upload your page somewhere - either paid hosting or some free web space with your ISP (internet service provider)

ashmic
04-26-2011, 08:16 PM
that Mso bit is from office so you've pasted something in from office (word or somewhere) directly, instead of via notepad (copy and paste into notepad, cut from notepad, paste into DW)

upload your page somewhere - either paid hosting or some free web space with your ISP (internet service provider)


Hi dave,
So I added two links to a new weebly.com site I made so you can see what I'm talking about. But unfortunately, when I created it on weebly the navigation bar is now taking on the styles of the link in the footer (for Ashley Sperry Designs) instead of how it's been behaving in Firefox & Internet Explorer when I open it into a browser via Dreamweaver. Do you have any ideas? Here's the link to the temporary site: http://testing0123.weebly.com.

Note:
(in a browser in Firefox & IE via Dreamweaver) the style I was needing help with originally was that when the nav bar was rolled over it had no style applied at all. The text remained the same when the hand rolled over it and it remained the same when clicked on and visited.

Now (via my weebly site I gave you) the nav bar style is white when rolled over and turns blue when clicked on which is the attributes I set for the link in my footer (Ashley Sperry Designs).

I have no idea why they are behaving so differently. My end goal is for the nav bar links to turn pink when rolled over and increase in size and when clicked on get bright pink and then when visited to turn back to black.

Thanks for your help.

ashmic