Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

links don't show up on a Mac 4

Status
Not open for further replies.

PaulBricker

Programmer
Sep 25, 2002
3,554
US
I've got 5 links on my intranet homepage. We debuted it the other day and we had complaints from a couple Mac users that they couldn't see any of the links to other pages. The funny thing is they could see the links to the email addresses on another part of the page. I built the page using CSS. The styles for the links are very generic

a:link {
font-weight: bold;
text-decoration: none;
color: #666600;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #666600;
}
a:hover, a:active {
text-decoration: underline;
color:#A0A6A0;
}
and this is one of the links they can't see.

<p><a href = " title = "click here to enter a new work request">Work Request Form</a></p>

I couldn't find anything that specifically spoke to this problem. Anyone have any thoughts.

Thanks

Paul
 
Well your code looks fine to me (both Mac and PC user). I would imagine that the problem is in the CSS definition for the container that the hrefs are in (ie. they are in a div that has a style on them, or a table, or something).

Try moving them to just the body of the page (ie. move them immediately after the body tag) and see if they can be seen.

You could also ask some of your customers what Operating System they are using (MacOS9 or MACOSX) and then what browser (and version if possible). Although I know of no browser specific bugs for the Mac that would cause the behaviour you describe.

Do you have a URL that we can test this on?

Jeff
 
Thanks Jeff, it's an Intranet site for our school so I don't think you can see it.
The page links are in one <div> and the email links are in another but there is absolutely nothing complex about the CSS or the Div id's. They just maintain location with very little formatting. The page sets up properly, they just don't see the page links. Knowing that there isn't some obvious problem I'm over looking helps.
I will have to follow up with the faculty members involved and see if I can get some idea what they are using for OS versions and browers versions. They both use IE but I'm only assuming it was 5.x
Sounds like I need to make some house calls. Believe it or not, some faculty have been known to forget to plug in their machines and then call Tech Support. I'll work on that end of it next.
Thanks for confirming there is no obvious problem in the page.

Paul
 
manarth, is there some way to validate within an Intranet site. I tried validating some pages a while back but being on a local pc, I wasn't able. Are there any downloadable validator's?

Thanks

Paul
 
for one-offs, the easiest solution is to save off the html, and upload it to the validator.

but the W3C validators are available for download from the W3C.

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]
 
That page has the link I need to browse my files. Now I've got to make them compliant. Thanks for that info.

Paul
 
Do the links not display or do they display in the same colour as the background?

Perhaps the version of IE they are using does not recognise the a:link (etc) psuedo classes.

You could also try changing the order of the a psuedo classes as I think this can have an effect in some browsers.

As a test, comment out the a: psuedo classes and see if the links show up when they are left to their own devices.
 
As far as I know the links do not display. My plan at this point is to find a few minutes to get to these machines and actually see what the homepage looks like. At that point I'll have a better idea whether they don't display at all or are hidden by the background. I've got to eliminate user error first and then see which suggestions might solve the problem. It's getting up on campus and actually connecting with the faculty member that will be the big challenge.

Paul
 
If you copy and paste the code here I can test it for you as I have Macs coming out of my ears!
 
Try separating the last link of your link CSS, some browsers behave just wierd!

Have you any other CSS in the document, maybe you could post that too.

Also, when you specify the text colour, also specify the background colour, you could use "inherit" for example.

If there is any risk of colours not contrasting sometimes the browser does strange things, I have had this problem a few times. It's best to specify everything clearly.

<!--#sig value=''É'' url='' -->
 
Here is the page I'm using. The modstone3.jpg used in the background is just a sandstone colored .jpg. I use it for the background on all the pages for consistency.

Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title></title>
<style type = "text/css">
a:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: #666600;
	}
a:visited { 
	font-weight: bold; 
	text-decoration: none; 
	color: #666600;
	}
a:hover, a:active { 
	text-decoration: underline; 
	color:#A0A6A0;
}

#container {
    margin:0;
}
#beginning {
   
    width:225px;
    height:200px;
    padding:10px;
}

#ending {
  
   color:#993333;
   position:absolute;
   top:10px;
   left:670px;
   float:right;
   padding:10px;
}
#intro {
 
    color:#993333;
    position:absolute;
    margin-top:10px;
    margin-left:10px;
    width:400px;
    padding:0;
    font-size:6;
}

#fillin {
    
    color:#993333;
    position:absolute;
    margin-left:290px;
    top:250px;
    width:280px;
    height:200px;
    padding:10px;
}
#visual {
    
    position:absolute;
    margin-top:10px;
    margin-left:10px;
    padding: 0;
}
body {
    background:url(modstone3.jpg)repeat;
}
</style>
</head>
<body>
<div id="container">
<div id="visual"><img src = "[URL unfurl="true"]http://physicalplant.williston.com/P000790penink.jpg"[/URL] width = 250px height = 250px</div>
<div id="intro">   
<h1 align = center>The Williston Northampton School<br>Physical Plant<br>Homepage</font></h1></div>
<div id="ending">Director of Physical Plant:<br>Jeff Tannatt<br>Phone:529-3213<br><a href = "mailto:jtannatt@williston.com">jtannatt@williston.com</a></p>
<p>Administrative Assistant:<br>Barbara Shepherd:<br>Phone: 529-3272<br><a href = "mailto:bshepherd@williston.com">bshepherd@williston.com</a></p>
<p>Compliance Manager:<br>Bruce Tanguay<br>Phone: 529-3297<br><a href = "mailto:btanguay@williston.com">btanguay@williston.com</a></p>
<p>Ground/Security/Rink Manager:<br>Ed Chmura<br>Phone: 529-3269<br><a href = "mailto:echmura@williston.com">echmura@williston.com</a></p>
<p>Maintenance Manager:<br>Paul Ross<br>Phone: 529-3268<br><a href = "mailto:pross@williston.com">pross@williston.com</a></p></div>
<div id="beginning"><h2>Links to other Pages</h2>
<p><a href = "[URL unfurl="true"]http://physicalplant.williston.com/workrequestform.html"[/URL] title = "click here to enter a new work request">Work Request Form</a></p>
<p><a href = "[URL unfurl="true"]http://physicalplant.williston.com/inputbox.asp"[/URL] title = "Click here to look up an existing work order">Find A Work Order</a></p>
<p><a href = "[URL unfurl="true"]http://physicalplant.williston.com/SmokeDetectorInputBox.asp"[/URL] title = "Click here to return your Smoke Detector Inspection Form">Smoke Detector Inspections</a></p>
<p><a href = "[URL unfurl="true"]http://physicalplant.williston.com/setuprequest.html"[/URL] title = "Click here to view the Set Up Request Form">Set Up Request Form</a></p>
<p><a href = "[URL unfurl="true"]http://physicalplant.williston.com/keyrequestform.html"[/URL] title = "Click here to view the Key Request Form">Key Request Form</a></p>

</div>

<div id="fillin">
        <h2>Plant Schedule</h2>
        <p><b>Week 4/04 - 4/10</b>
        <p>Schoolhouse 3rd floor windows(cont.)
        <p>Athletic Center patch and touch up
        <p>Conant Basement Windows
        <p>Mail Box installation
        <p>Spring Cleaning/Second Visits</div>
 
</div>



</body>
</html>

Thanks for any input and or suggestions. I've only been at this a couple months. Had the opportunity to do the work and jumped at it.

Paul
 
I think it looks a little better without the code tags so here it is naked.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<html>
<head>
<title></title>
<style type = "text/css">
a:link {
font-weight: bold;
text-decoration: none;
color: #666600;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #666600;
}
a:hover, a:active {
text-decoration: underline;
color:#A0A6A0;
}

#container {
margin:0;
}
#beginning {

width:225px;
height:200px;
padding:10px;
}

#ending {

color:#993333;
position:absolute;
top:10px;
left:670px;
float:right;
padding:10px;
}
#intro {

color:#993333;
position:absolute;
margin-top:10px;
margin-left:10px;
width:400px;
padding:0;
font-size:6;
}

#fillin {

color:#993333;
position:absolute;
margin-left:290px;
top:250px;
width:280px;
height:200px;
padding:10px;
}
#visual {

position:absolute;
margin-top:10px;
margin-left:10px;
padding: 0;
}
body {
background:url(modstone3.jpg)repeat;
}
</style>
</head>
<body>
<div id="container">
<div id="visual"><img src = " width = 250px height = 250px</div>
<div id="intro">
<h1 align = center>The Williston Northampton School<br>Physical Plant<br>Homepage</font></h1></div>
<div id="ending">Director of Physical Plant:<br>Jeff Tannatt<br>Phone:529-3213<br><a href = "mailto:jtannatt@williston.com">jtannatt@williston.com</a></p>
<p>Administrative Assistant:<br>Barbara Shepherd:<br>Phone: 529-3272<br><a href = "mailto:bshepherd@williston.com">bshepherd@williston.com</a></p>
<p>Compliance Manager:<br>Bruce Tanguay<br>Phone: 529-3297<br><a href = "mailto:btanguay@williston.com">btanguay@williston.com</a></p>
<p>Ground/Security/Rink Manager:<br>Ed Chmura<br>Phone: 529-3269<br><a href = "mailto:echmura@williston.com">echmura@williston.com</a></p>
<p>Maintenance Manager:<br>Paul Ross<br>Phone: 529-3268<br><a href = "mailto:pross@williston.com">pross@williston.com</a></p></div>
<div id="beginning"><h2>Links to other Pages</h2>
<p><a href = " title = "click here to enter a new work request">Work Request Form</a></p>
<p><a href = " title = "Click here to look up an existing work order">Find A Work Order</a></p>
<p><a href = " title = "Click here to return your Smoke Detector Inspection Form">Smoke Detector Inspections</a></p>
<p><a href = " title = "Click here to view the Set Up Request Form">Set Up Request Form</a></p>
<p><a href = " title = "Click here to view the Key Request Form">Key Request Form</a></p>

</div>

<div id="fillin">
<h2>Plant Schedule</h2>
<p><b>Week 4/04 - 4/10</b>
<p>Schoolhouse 3rd floor windows(cont.)
<p>Athletic Center patch and touch up
<p>Conant Basement Windows
<p>Mail Box installation
<p>Spring Cleaning/Second Visits</div>

</div>



</body>
</html>

Paul
 
If the problem links are those on the eft side...

in IE 5 under Mac OSX the links appear underneat the picture so they are obscured by the pic.

I'll have a quick look to see if I can see why.
 
The page also does not render in the way you want it to in Opera 7, Netscape 7 or Mozilla under Windows.

The only browser where it appears to render as you intend it is in IE 6 under windows.

IE is a bit fuzzy in its interpretation of CSS, whereas the others aren't (well not quite as odd). I suggest you reexamine your CSS rules that define your page layout.
 
2 things I spot straight away are

1. Your first image is not closed

<img src = " width = 250px height = 250px

should be

<img src=" width="250px" height="250px" />

2. You have set a height dimension for #beginning, don't do this, it will fail in browsers other than IE.

Validate the pages and try to fix the errors then recheck the results. I'll try to help tonight if I can, if you haven't found the solution by then


<!--#sig value=''É'' url='' -->
 
I knew it didn't render well in Netscape7 but because IE is the standard for the campus, I didn't get to stressed by it. It was the IE/Mac that seems to throw the twist in. Being as new to this as I am, and considering the fact that all my work for the time being will be intranet work, do you have any suggestions on which way to take this. I don't mind pulling it all apart (I did validate it using the CSS Validator) and starting over, but because IE is the browser we use, am I going to gain anything by redesigning it for Netscape/Opera/Mozilla and then trying to get it to work for IE as well. I'm open to all suggestions. I'm glad to have the opportunity to do the work and would like to build the best foundation for handling all the subsequent work (I've already got 2 more intranet site to build) so I rather get it right the first time.

Thanks everyone. I do appreciate it.

Paul

 
cian, I will add the /> closing tag to the img. That may help. As I said in my other post, I did send this thru the CSS Validator. It didn't change the Height: attribute for #beginning but I will play with that and see if it makes a difference.
Appreciate all the suggestions.

Paul
 
I took the height attribute out of the #beginning id and add a margin-top so the new #beginning looks like this

#beginning {

margin-top:10px;
width:225px;
padding:30px 10px;
}

Foamcow, I'm wondering if the margin-top would help keep the links from sliding up under the pic.

Paul
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top