Welcome to WebmasterWorld Guest from 54.163.35.238

Forum Moderators: coopster & jatar k

Message Too Old, No Replies

Links Work in IE9 - Not Working in Safari or Chrome

     

Scotty13

11:48 am on Jan 17, 2013 (gmt 0)



My header links work in IE9, however they donít work in Safari or in Chrome browsers. The weird thing about this is my <?php echo $ckinOptions; ?> (highlighted on the bottom) links work in Safari & Chrome.

Here is my script....

<div style="font-size:72px; line-height:1.0em; float:left;margin:-15px;">
<blockquote>
<p><a href="http://www.myglobalpnr.com/index.php"><img src="images/mgplogo1.png" alt="Note" title="Go Back Home to My Global PNR" width="150" height="150"hspace="0" vspace="0" border="0" /></a><strong>My Global PNR</strong> </p>
</blockquote>
</div>
<div align="left">
<table width="883" align="left" cellpadding="0" cellspacing="0" >
<tr>
<td width="1" height="55" valign="top"><div align="right"></div></td>
<td width="801">
<div class="headerBtns" style="margin-top:-80px; text-align: center;">
<div align="center"><span class="center" style="text-align: right">
<a href="http://myglobalpnr.com/myworktriptopics/index.php">Work & Trip Forums</a>&nbsp;&nbsp;
<a href="http://myglobalpnr.com/tktedmembers_search.php">Search Ticketed Members</a>&nbsp;&nbsp;
<a href="http://www.myglobalpnr.com/myvcphotoalbum/index.php">My Vacation Photos</a>&nbsp;&nbsp;</span><span style="text-align: right"><span style="text-align: center"><a href="http://myglobalpnr.com/myvcpostcard.php#">Send A Vacation Postcard</a></span></span><span style="text-align: center">&nbsp;&nbsp; </span></div>
<p align="center"><span style="text-align: center"><a href="http://myglobalpnr.com/myvcbookexchg/index.php">Traveling Book &amp; Guide Exchange</a>&nbsp;&nbsp;
<a href="http://www.myglobalpnr.com/myvcorganizer/index.php">My Vacation Organizer</a>&nbsp;&nbsp;
<a href="http://myglobalpnr.com/myvchomeswap/testRentalListing.php?controller=Listings&action=add">Rent A Vacation Home</a></span></p>
</div>
</td>
</tr>
</table>
</div>
<div class="editmyresckairmail">
<div align="right" class="center">
<div align="center"><?php echo $ckinOptions; ?></div>
</div>

Thanks in advance,
Scotty13

swa66

12:07 pm on Jan 17, 2013 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Never, ever trust IE to do the right thing.

Whenever IE and other browsers disagree: rest assured that the other browsers have it right. So your links probably should not work due to other things such as overlapping elements and not being at the top or simply due to your code not making much sense to start with (did it validate ?)

Oh, and WebmasterWorld now probably outranks your site for your keywords ...

Scotty13

3:05 pm on Jan 17, 2013 (gmt 0)



I just did it all over and now it works in all three browsers. Now I have to figure out how to move my logo over to the left corner and lower my title to align up with the bottom of the globe.

You have any idea how to do that in text/css?

Thanks Again,
Scotty13

swa66

3:42 pm on Jan 17, 2013 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



CSS positioning is relatively trivial once you get the hang of it.

You have a number of options:
  • margins: I'd be careful how I'd use them for positioning. But they can be combined with other positioning to get nifty results.
  • float: left or right you can float an element left or right (much like in old fashioned html you can give an image a align="left" (or right). It pushes the next elements out of the way that are in the normal flow, just like that image does.
  • position: relative: allows you to nudge an element using top, left, right and bottom statements from it's normal spot ("in the flow"). This is that often used as the element gets no reserved space in where it is moved to and keeps it's old reserved spot.
    It has also as effect that the element gains "position" (see further)
  • position: absolute: removes the element from the flow, and allows it to be positioned using top,left, right and bottom relative to the closest element that has gained "position", or the html element if there is none. Notice the element is in no flow: so you need to put it where it doesn't overlap with things you want to be seen.
  • position: fixed: removes the element from the flow and positions it much like the absolute positioned elements are, but this time relative to the viewport (the screen), so it does not scroll.

With that, and some paying around you should find what you seek easily.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month