Help - Search - Members - Calendar
Full Version: Niidz Halp with Roolloverz
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
emberfly
Sep 27 2009, 12:29 PM
I made a layout recently, and in this layout I experimented with rollovers (first time trying them).

They work fine in Firefox in all resolutions, but Internet explorer fcks them up.

Here is the preview

Here are the codes:


CODE

<style type="text/css">
/* STYLESHEET BY: EMBERFLY_LAYOUTS @ XANGA.COM */
body {
background-color: #000000;
background-image: url();
background-attachment: scroll;
background-repeat: repeat-x;
background-position: top center, bottom center;
margin-top:0px;
}
#crackwrap {
width:1100px;
background-image: url();
background-repeat:repeat-x-y;
margin-top:0px;
}
#AmyLee {
background-image: url(http://emberflylayouts.googlepages.com/lookatthizzbetterfasterbetterfaster.jpg);
width:1000px;
height:600px;
background-repeat:no-repeat;
background-position:top left;
margin-top:30px;
overflow:auto;
text-align:left;
}
#AmyLeeLinks {
width:92px;
height:116px;
background-color:transparent;
overflow:auto;
overflow-x:hidden;
overflow-y:hidden;
margin-left:328px;
margin-top:46px;
text-align:left;
}
#BlogPosition {
background-color: transparent;
background-image: url();
background-repeat: no-repeat;
background-position:top left;
width:438px;
height:498px;
border:0px solid #03755d;
text-align:left;
margin-left:540px;
overflow:auto;
margin-top:-85px;
}
/* REMOVE: */
table.footer, table.navigation, table.search td, table.left, .left {
display:none !important
}
:focus {
outline:none;
}
h1, h2, h3, h4, h5, h6{
color:#ababab;
}
h4 {
font-size:14px;
line-height:14px
}
.left, table.left, td, p, span {
/* MAIN TEXT */
font:normal 12px arial;
line-height:14px;
color: #ffffff;
letter-spacing:0px;
}
u, span underline {
/* UNDERLINED TEXT */
color: #9b7151;
}
em, i, span italic {
/* ITALIC TEXT */
color:#9b7151;
}
b, strong {
/* BOLD TEXT */
color:#b5282f;
}
div.blogheader, .caption {
/* DATES */
font-family: georgia;
font-style: italic;
font-size:15pt;
font-weight:normal;
line-height: 15pt;
color: #ababab;
margin-left:-10px;
padding-left:10px;
background-color:transparent;
text-align: left;
width: 405px;
}
a:link, a:visited {
/* HYPERLINKS */
color: #ffffff;
cursor:hand;
font: normal 11px arial;
line-height:14px;
text-transformation:lowercase;
}
a:hover {
color: #87ab9f;
font: normal 11px arial;
text-decoration: none;
background-color: #;
line-height: 14px;
text-transformation:lowercase;
}
input, select, textarea, .button {
font:normal 8pt arial;
background-color: #ffffff;
color:#000000;
border:1px solid #333333;
}
table.left {
background-color: transparent;
width:230px;
color: #000000;
}
table.blogbody {
/* BLOG ENTRIES */
background-color:transparent;
border:0px;
margin-left:-10px;
border-bottom: 1px solid #333333;
width:415px;
}
hr {
/* horizontal divider */
display:none;
}
#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops {
width:385px !important;
}
a.emberflyxanga:link, a.emberflyxanga:visited, a.emberflyxanga:active {
/* NAV LINKS */
background-color:transparent;
text-align: left;
display:block;
width:92px;
height:14px;
}
a.emberflyhome:link, a.emberflyhome:visited, a.emberflyhome:active {
background-color:transparent;
text-align: left;
display:block;
width:92px;
height:12px;
}
a.emberflyprivate:link, a.emberflyprivate:visited, a.emberflyprivate:active {
background-color:transparent;
text-align: left;
display:block;
width:92px;
height:16px;
}
a.emberflysubscribe:link, a.emberflysubscribe:visited, a.emberflysubscribe:active {
background-color:transparent;
text-align: left;
display:block;
width:92px;
height:12px;
}
a.emberflylookandfeel:link, a.emberflylookandfeel:visited, a.emberflylookandfeel:active {
background-color:transparent;
text-align: left;
display:block;
width:92px;
height:17px;
}
a.emberflymessageme:link, a.emberflymessageme:visited, a.emberflymessageme:active {
background-color:transparent;
text-align: left;
display:block;
width:92px;
height:13px;
}
a.emberflysignout:link, a.emberflysignout:visited, a.emberflysignout:active {
background-color:transparent;
text-align: left;
display:block;
width:92px;
height:14px;
}
a.emberflycredit:link, a.emberflycredit:visited, a.emberflycredit:active {
background-color:transparent;
text-align: left;
display:block;
width:92px;
height:18px;
}








a.emberflyxanga:hover {
/* NAV LINKS */
background-color: transparent;
background-image: url(http://x03.xanga.com/0d785b3a75d18255461124/w203142343.png);
background-repeat: no-repeat;
background-position:top left;
text-align: left;
display:block;
width:92px;
height:14px;
}
a.emberflyhome:hover {
background-color: transparent;
background-image: url(http://xe1.xanga.com/bb7f235ad6431255461532/w203142719.png);
background-repeat: no-repeat;
background-position:top left;
text-align: left;
display:block;
width:92px;
height:12px;
}
a.emberflyprivate:hover {
background-color: transparent;
background-image: url(http://xb9.xanga.com/46af222b69631255461541/w203142728.png);
background-repeat: no-repeat;
background-position:top left;
text-align: left;
display:block;
width:92px;
height:16px;
}
a.emberflysubscribe:hover {
background-color: transparent;
background-image: url(http://x24.xanga.com/782f405ac6133255461568/w203142752.png);
background-repeat: no-repeat;
background-position:top left;
text-align: left;
display:block;
width:92px;
margin-left:1px;
height:12px;
}
a.emberflylookandfeel:hover {
background-color: transparent;
background-image: url(http://xac.xanga.com/6d5f5a2346133255461574/w203142758.png);
background-repeat: no-repeat;
background-position:top left;
text-align: left;
display:block;
width:92px;
height:17px;
}
a.emberflymessageme:hover {
background-color: transparent;
background-image: url(http://x41.xanga.com/863f362169c31255461601/w203142782.png);
background-repeat: no-repeat;
background-position:top left;
text-align: left;
display:block;
width:92px;
height:13px;
}
a.emberflysignout:hover {
background-color: transparent;
background-image: url(http://x79.xanga.com/205f575ad6c33255461616/w203142795.png);
background-repeat: no-repeat;
background-position:top left;
text-align: left;
display:block;
width:92px;
height:14px;
}
a.emberflycredit:hover {
background-color: transparent;
background-image: url(http://x59.xanga.com/d65f5b2340633255461928/w203143073.png);
background-repeat: no-repeat;
background-position:top left;
text-align: left;
display:block;
width:92px;
height:14px;
height:18px;
}
/* STYLESHEET BY EMBERFLY_LAYOUTS @ XANGA.COM */
</style>









<div align="center">

<div id="AmyLee">
<div id="AmyLeeLinks">

<a class="emberflyxanga" href="http://www.xanga.com"></a>
<a class="emberflyhome" href="http://www.xanga.com/USERNAME"></a>
<a class="emberflyprivate" href="http://www.xanga.com/private/homemain.aspx?set=1"></A>
<a class="emberflysubscribe" href="http://www.xanga.com/connect.aspx?friend=true&user=USERNAME"></a>
<a class="emberflylookandfeel" href="http://edit.xanga.com/claf.aspx"></A>
<a class="emberflymessageme" href="http://www.xanga.com/message.aspx?user=USERNAME"></a>
<a class="emberflysignout" href="http://www.xanga.com/logout.aspx"></A>
<a class="emberflycredit" href="http://emberfly-layouts.xanga.com/"></A>

</div>



<div id="BlogPosition">


o.o
synapse
Sep 27 2009, 03:37 PM
re do it to make sure that each image is the same size. it makes things so much easier on different browsers.
emberfly
Sep 28 2009, 04:26 PM
so.. um...... nat can you help me?
Mickey
Sep 28 2009, 04:30 PM
What's wrong with them? They work fine for me.

Edit: Are you talking about the irregular spacing between the rollovers? Try adding float:left; on each rollover's hover selector.
synapse
Sep 28 2009, 04:49 PM
QUOTE(Mike @ Sep 28 2009, 05:30 PM) *
What's wrong with them? They work fine for me.

Edit: Are you talking about the irregular spacing between the rollovers? Try adding float:left; on each rollover's hover selector.

emberfly
Sep 28 2009, 05:25 PM
QUOTE(Mike @ Sep 28 2009, 04:30 PM) *
What's wrong with them? They work fine for me.

Edit: Are you talking about the irregular spacing between the rollovers? Try adding float:left; on each rollover's hover selector.


Ok I'll try this and get back to you :o

//

It had no effect.
fixtatik
Sep 28 2009, 07:17 PM
You're gonna have to blame Xanga for this one. Without a doctype, browsers go into quirks mode. Quirks mode makes browsers use their standardization settings (which in IE's case, are horrendous). The links look misaligned on hover because IE is giving them a minimum height of 14 pixels.

If you were able to, simply adding <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> to the top of the document would fix all of your problems. But since it's Xanga and you can't, I'd suggest trying a different method of using hover links, probably one that involves making all of the links the same height (and at least 14 pixels high).
emberfly
Sep 28 2009, 08:05 PM
Thanks so much fixtatik :-)
manny-the-dino
Sep 28 2009, 10:49 PM
Topic Closed and Moved
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.