|
CSS - Ie7 Changes Layout When Cursor Passover Links
When my cursor passes over the links on the top of my page (not clicking a link, just passing the cursor over the link), the title jumps from its position directly under the links to a position to the right of the links.
Since you are giving me help, I want to make this as easy for you as I can. I have posted a screen shot of exactly how my header looks before and after passing the cursor over the links. www.middle-age-guy.com/forum-css-help_images.html Here is the relevant css. I've separated and labeled the css so that you can see how it flows down the page. ___________________________________________ #header { width: 998px; margin: 0 auto; } #header .container { background:url(images/head_pat.jpg) left top repeat-x; height: 200px; } /* -- links along the top of the page (Home, MAGman Lifestyles, etc. --*/ .topline { } ul.menu li.page_item { float: left; display: inline; font-size:12px; margin-top: 25px; } ul.menu li.page_item a { color:#000!important; text-decoration: none; padding:25px 0 0px 0px; margin-right: 15px; list-style-type: none; } ul.menu li.page_item a:hover { color: #fff!important; text-decoration:none; background:url(images/menu_hover.gif) left repeat-x; } ul.menu li.current_page_item a { color: #fff!important; text-decoration:none; background:url(images/menu_hover.gif) left repeat-x; } /* -------------------- Image on right side of header ---------*/ #magmanheadshot { padding:0; margin:25px 50px 20px 0; float:right; width:160px; color:#003e4f; } /*--------------- Title - Middle-Age-Guy.com --------------*/ #headline { width:450px; margin-top: 20px; } #headline h1 { display: block; clear:left; font-size:30px; margin-left: 20px ; margin-bottom: 5px; color:#FFFFFF; font-weight:normal; } /* ------------- Tagline below the title --------------*/ .desc_l { background:url(images/desc_l.gif); width:10px; height:27px; float:left; margin-left: 25px; } .desc { background:url(images/desc_pat.gif); height:27px; float:left; font-size:14px; line-height:25px; font-weight:normal; color:#FFFFFF; } .desc_r { background:url(images/desc_r.gif); width:10px; height:27px; float:left; } .magmandatingsystem { margin: 10px 0 0 0; font-size: 12px; padding: 0 0 0 23px; float: left; width: 400px; } /* --------------------- Membership login link -----*/ .login { font-size: 18px; color:#FFFFFF; text-decoration: none; float: right; margin-top: -80px; margin-right: 50px; list-style-type: none; } .login a { color:#FFFFFF!important; text-decoration: none; } .login a:hover { color:#FF0000!important; text-decoration:none; } .join { font-styleblique; font-size: 9px; font-weight: bold; } .join a { text-decoration:underline !important; color:#ff0000!important; } .join a:hover { color:#0099FF!important; } /* ------------ End of Header -*/ _______________________________________ Here is the relevant html from header.php <div id="header"> <div class="container"> <div class="topline"> <ul class="menu"> <li class="page_item"> <a href="(URL address blocked: See forum rules)">Home</a></li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/?page_id=89" title="General information foundational to success in all other areas">MAGman Lifestyle</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/?page_id=89" title="One of the three Pillars of any man's life - his relationships with others">Women & Relationships</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/?page_id=89" title="The Pillar of a sound body is a middle age guy's call to reality">Health & Fitness</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/?page_id=89" title="A man's third Pillar is his ability to do battle in the business world.">Business & Wealth</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/magman-blog" title="MAGman's Blog">Blog</a> </li> <li class="page_item"> <a href="<?php if($db_feedburner_address) { echo $db_feedburner_address; } else { bloginfo('rss2_url'); }?>">Subscribe to RSS</a> </li> </ul> </div> <!-- end #topline --> <div id="magmanheadshot"> <img src="/wp-content/themes/blog-design-studio-newblue/images/mag_man4-Head-shot.gif" /> </div> <div id="headline"> <h1><?php bloginfo(''); ?></h1> <div> <div class="desc_l"></div> <div class="desc">The #1 Personal Development Website for Middle Age Guys</div> <div class="desc_r"></div> <div class="magmandatingsystem"><a href="(URL address blocked: See forum rules)/?page_id=176">Read more</a> about the <a href="(URL address blocked: See forum rules)/?page_id=176"><span style="color:#FF0000!important">MAGman Dating System</span></a> for Middle Age Guys</div> <!-- end #headline --> <div class="login"><a href="(URL address blocked: See forum rules)/?page_id=89">Members' Login</a> <p class="join"><a href="(URL address blocked: See forum rules)">Click here</a> to become a member.</p> </div> </div> <!-- end .container --> </div> <!-- end .header --> ______________________________________________ Finally, this is the source code ________________________________________________ <div id="header"> <div class="container"> <div class="topline"> <ul class="menu"> <li class="page_item"> <a href="(URL address blocked: See forum rules)">Home</a></li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/?page_id=89" title="General information foundational to success in all other areas">MAGman Lifestyle</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/?page_id=89" title="One of the three Pillars of any man's life - his relationships with others">Women & Relationships</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/?page_id=89" title="The Pillar of a sound body is a middle age guy's call to reality">Health & Fitness</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/?page_id=89" title="A man's third Pillar is his ability to do battle in the business world.">Business & Wealth</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/magman-blog" title="MAGman's Blog">Blog</a> </li> <li class="page_item"> <a href="(URL address blocked: See forum rules)/feed/">Subscribe to RSS</a> </li> </ul> </div> <!-- end #topline --> <div id="magmanheadshot"> <img src="/wp-content/themes/blog-design-studio-newblue/images/mag_man4-Head-shot.gif" /> </div> <div id="headline"> <h1>Middle-Age-Guy.com</h1> </div> <div class="desc_l"></div> <div class="desc">The #1 Personal Development Website for Middle Age Guys</div> <div class="desc_r"></div> <div class="magmandatingsystem"><a href="(URL address blocked: See forum rules)/?page_id=176">Read more</a> about the <a href="(URL address blocked: See forum rules)/?page_id=176"><span style="color:#FF0000!important">MAGman Dating System</span></a> for Middle Age Guys</div> <!-- end #headline --> <div class="login"><a href="(URL address blocked: See forum rules)/?page_id=89">Members' Login</a> <p class="join"><a href="(URL address blocked: See forum rules)">Click here</a> to become a member.</p> </div> </div> <!-- end .container --> </div> <!-- end .header --> Thanks for any help you can bring. Scott Similar TutorialsWhen you go near a link the cursor flickers and then goes back to default, cant get it to show normally for any link. Works on my windows PC but not on my Mac Even tried a{ cursor:pointer; } but the same thing happens... http://pd-scammell.co.uk/site/ Any ideas? Thanks. Hi I've never posted on a forum before but I am having some css layout issues. Here is an example: URL Basically, only some of the links on the side of the page work. Some just can't be clicked on at all. I have noticed that the ones that can't be clicked on all seem to be parallel with text in the middle column that wraps. It's almost as if the text isn't wrapping in the middle column and carrying straight on and covering the links on the right so they cannot be clicked on. I'm assuming this is something to do with the css as it happens all over the site where the same situation occurs. Has anyone come accross this before or knows how to stop this from happening? Any help would be much appreciated. Also, this only happens in IE not in Firefox. If you need to see the code or the css let me know what you need and i'll post it. Thanks in advance, Bruce I am really racking my brain here I know this will end up being a simple fix but after creating this for a few hours straight, I just can't see it. Ok here's the page and the situation... myspace[dot]com[slash]daggersanddiamonds My links at the top of my page are sliced fine and the links do work (in explorer) but somehow in Firefox, they are being hidden by some invisible layer that extends about 800ish pixels in width that hides the clickability. As you can see, the first half portion of "Add to Friends" works but the rest is disabled, and part of the "Vimeo" link works, but not totally.. and ofcourse the middle links are totally dead to click. My question is, whats hiding these links? Any help is super thanked! Hi all, I'm trying to change my cursor when I hover over a image on a onclick event as the example below but I can't get this to work. <a onmouseover="this.style.cursor='hand'"> Regards Stephen Hi, Is their any way to change the cursor color in css or javascript? Thanks Rishu Hi people, I could not find a grabbing hand cursor in css cursor property. Instead I use this "cursor:move;" for a while. A grabbing hand like what GoogleMap do when dragging a certain map. Is that a server side creation? I'm trying to change the cursor when a user mouses over an image. Code: cursor:hand Works perfect in IE, but the cursor tag doesn't respond at all in Firefox. I've been able to "trick" Firefox when using onClick JS links by putting href="#". hello, i'm placing a custom cursor on a stylesheet like so: body { cursor: url(normal.cur), default; } and a weird effect appeared on internet explorer... when the cursor is over any layers or images (i guess, over any actual elements), the custom cursor appears. but when it's on an empty area, say the page background, the default cursor appears instead. how can i fix this (while trying to maintain the default cursors for every other browser)? thanks for any help! I have a navigation list over which I want the cursor to change from vertical line to a hand. Has the hand cursor been deprecated? I tried Code: style.cursor='hand' with both onmouseover and onmousehover. Neither works. Hi I've got a testpage, with everything removed except the problem which occurs in Firefox http://ied.gospelcom.net/tester.php There is a mouseover popup, which is toggled from hidden to visible by onmouseover on some of the table cells. The CSS for this is #reportalert {visibility:hidden;} This is not a javascript problem because it happens with js disabled. I have removed the JS toggle script from this page, so you won't even see this happen. As soon as I have the div with id="reportalert" anywhere on the page, its presence prevents a cursor appearing in the textarea. It does, in fact, have focus, because you can type in it. But it is disconcerting not to appear to have focus. It is as if the 'visibility:hidden' of the div somehow leaks out to affect the cursor. I have tried all sort of things, such as putting visibility:visible on the text area, or its whole TD. Any other ideas I could try? thanks Tony Code: <style>
<!--
BODY{
cursor:url("Hand.USA.cur");
}
a, a:hover {
cursor:url("Hand.USA.cur");
}
-->
</style>
I'm using the above code to display an icon that is replacing the default arrow. This only seems to work in Internet Explorer 6+. Would anyone know another way to display an image or icon either through a url (http://www.blah.com/img.jpg) or .cur or .ani that will work in Mozilla, and Netscape ? Thanks, Shawn Is it possible to change the mouse cursor to a "hand" when hovering over a <input type="submit" /> ? Thank you I am trying to use CSS so that when a user hovers their mouse over a submit button, they get a "hand" or "pointer" instead of the default arrow. Below is an example page to demonstrate what I am doing. It works fine in the latest version of Internet Explorer and Mozilla Firefox, but not in Opera 7.54. In Opera 7.54, the cursor changes when I hover over the border of the button, but when I move to the center of the button it goes back to an arrow. Does Opera 7.54 support this style properly or am I doing something wrong? Code:
<!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" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="dr0n3" />
<style type="text/css">
/* I have read that I should use pointer, then hand so it is compatible across a range of browsers, but this still doesn't work properly in Opera 7.54 */
.button
{
cursor: pointer;
cursor: hand;
}
</style>
</head>
<body>
<form action="page.php" method="post">
<p><input type="submit" name="submit" value="Test" class="button" /></p>
</form>
</body>
</html>
Hi im new, I've got a problem and I'm stumped as to why it's happening. I've got several lists on my page with link items. They all work fine, but when I hover over the links in my navbar in chrome and safari, the cursor turns to a text one rather than a hand. This means I can't actually click on the link. However, there are other lists on the page that work fine, and they all work in Firefox. Does anyone know why this is occurring? You can view the pages he andrewcharlton.co.uk/gaming_and_gambling2/ggbusinessplans.html (Can't seem to post a proper link as I am a new user) It's the about, contact links in the header that dont work. hmm. Would be grateful if anyone knows the answer. Thanks! Real odd one here. Take a look at http://www.moxiegirlz.com/?section=moxiegirlz Note that you can click on one of the characters at the bottom to see their info. But when you do so, the characters no longer get the "hand" pointer icon (in FF and Safari, haven't tested IE). I've tried applying cursor:pointer directly to the a tags, though one shouldn't need to, and still nada. Somehow, calling a jscript in the href is killing the hand pointer. Anyone know why? I am looking for a way (preferably using CSS) to make an I-beam or cursor inside a text field to become invisible. This may be achieved by changing its color to match the bgcolor, by making it invisible altogether, or even simply to get it to stop blinking (when the bg color is black). Any help would be appreciated. Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; }
Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? |
|||||||