|
CSS - Anchor Positioning Error In Ie7
Hey all,
I'm having a minor problem with an anchor (a.return, at the bottom of the page) on the following page: calvarychapeljax.com/fellowship.php In FF, Chrome, and IE8, it is displaying "properly" (a relative term, for sure ) on one line. In IE7 (and possibly prior IE versions; I don't have IE6 to test), the anchor is stacking vertically. I can't figure out if there's a wrapping issue, if there is less space in the way IE7 is interpreting the CSS, etc. What makes it worse is I have this anchor on other pages (webelieve, musicministry) and it is fine, even in IE7. Is the table affecting it? Any ideas? Similar TutorialsMy pages work fine in most browsers, but the positioning of the menu bar is wrong in IE7 browsers. I only discovered by chance when someone told me. The menu bar is offset too the right and upwards, part covering the logo. http://www.firstpokertips.co.uk/ I have looked and looked but cant find why this would be. In other browsers it is fine. Thanks for any advice. Hey folks, here's an odd problem that's got me totally stumped. I've got a nine item unordered list, each of which is a link that contains both text and a background image. The background image is a large spritebox. I'm using background-position to shift the spritebox to display the sprite specific to the a:link and also to display a separate a:hover version. Looks great in Safari and CSSEdit, but in Firefox four of the links are misplaced and the sprite is incorrect. The hover state is correct, however. This is hard to explain, but the example should help illustrate the problem. My thought was that it was related the psuedo class of a:link, but nothing I've tried seems to help. Any thoughts? The example file contains both the HTML and the CSS (just to simplify this problem for this forum). The full background image and the file containing the sprites is at my website, artmeetsearth dot org slash 2011 slash codetest dot html. To get the image type socialmediaicons.jpg instead of codetest. Thanks for any help you can offer! I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Hello, I am trying to create something really simple: An image anchor with a height of 100px where the image is centered inside the anchor ... However, this is not working: http://www.27lamps.com/Beta/Bar/Anchor.html I added a red background to the anchor to check it out. Any idea how to make this work? Thanks, Miguel What is the proper way to specify an anchor target in CSS? If you look at this site with IE6 there is a strange behaviour with the in-page anchor links where IE6 will set them all 'visited' (grey) even when they have not been visited. www.warehammid.dorset.sch.uk/ The ordinary site navigation links work OK (grey only if visited). With all other browsers all works OK even IE7. Any ideas as to why IE6 does not conform (is it a bug)? I'm sure its something to do with the '#'. Code below for you to see. Here is an example xhtml code: <!-- NAVIGATION --> <!-- Navigation Level 3 --> <div class="leftsideCol"><!-- InstanceBeginEditable name="sideNav" --> <ul> <li class="title">In-Page links</li> <li><a href="#">Governors</a></li> <li><a href="#pta">Parents Association</a></li> <li><a href="#staff">Staff</a></li> </ul> .... </div> and here is its CSS styling: .leftsideCol ul { margin: 0px 0px 0px 0px; padding: 0px; } .leftsideCol li { display: block; list-style: none; } .leftsideCol li.title { /*title of column is actually an li*/ color: #fff; text-transform: uppercase; text-align: center; font-weight: bold; background-color: #41a9ef; height: 21px; border-bottom: 2px solid #0c578d; line-height: 1.5em;/*to center lfc top header*/ } .leftsideCol li a { height: 1.3em; padding: 0px 0px 0px 2px; border-left: solid 7px #fff; font-weight: bold; text-decoration: none; } .leftsideCol li a:link { color: #0c578d; } .leftsideCol li a:visited{ color: #888888; } .leftsideCol li a:hover, .leftsideCol li a.selected{ border-left: solid 7px #d52c1e; border-bottom: 1px solid #d52c1e; } I am hacking a clients css. Can someone tell me where I am going wrong. His site is a Smarty one. Here is the meta tags. The website is www.russiansweets.us and I am trying to format the links in the right nav menu underneath the search function that are presently red. I added class A.one:{} Class but it seems not to make a difference. I get the same color links before as after (red) Code:
<html>
<head>
link href="stylenew.css" rel="stylesheet" type="text/css">
{literal}
<style>
A
{
COLOR: red;
FONT-FAMILY: Arial, Verdana, Helvetica;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
A:hover
{
COLOR: #993300;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
// here is the part I added a.one
{
COLOR: #FFFFFF;
FONT-FAMILY: Arial, Verdana, Helvetica;
FONT-SIZE: 13px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
a.one:hoover
{
COLOR: #FFFFFF;
FONT-FAMILY: Arial, Verdana, Helvetica;
FONT-SIZE: 13px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
</style>
//end of what I added
{/literal}
Here is the html Code:
<td>
<a class="one" href="disclaimer.php">Disclaimer</a>
</td>
Hello, On a bottom of a form I have 2 buttons: Submit and Cancel. Submit is an input and submits the form. Cancel should just redirect the user to a new page without submitting the form. I need the Cancel button to look the same as the Submit button. If I use an input of type button as Cancel button I am able to do that but then I need to rely on "onclick" to redirect the user ... I think would be better to use an anchor. However, I am having a problem in styling the anchor to make it look the same as the Submit input. Could someone tell me how to style the anchor and if using an anchor is better then using the button? My code: http://www.27lamps.com/Labs/Buttons/Buttons.html Thanks, Miguel i want to make it so a certain div is always at the bottom, but i cant do it by playing a min-height on the div above it, is there a solution to this problem? Hello, I am applying a style to a anchor tag. This anchor is created by an ASP.NET page and is inside a list item. I know the style is working because I applied it to the anchor in a page that has only this. .Test { background-color: #101010; color: #E2E2E2; padding: 4px 10px 6px 12px; text-decoration: none; font: normal 1.2em Verdana, Geneva, sans-serif; } <a href="Test.aspx" class="Test">Testing</a> However, when I apply it to the anchor inside the list item I don't get the bottom margin unless I add "display: block" to the style! But then the background is extended 100%. I don't know what is going on. I tried everything I could think off. Here is the code where the Test style is giving me problems: ... <li> <label for="tbMessage" id="lMessage">Mensagem<span class="Required">*</span></label> <textarea name="tbMessage" rows="4" cols="20" id="tbMessage"></ textarea> </li> <li> <a id="lbSubmit" class="Test" href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$cphSite$cfSendContact$lbSubmit", "", true, "ContactForm", "", false, true))'> Send </a> </li> </ul> Any idea why this is happening? All I am trying to do is to make my anchor look as a simple button. Thank You, Miguel I have an interesting problem. I'm using a basic <div> for my content in the center of my page. On one page (a FAQ page) I'm using a table to display the question/answer part. At the top of the page, above the table, I have a bunch of questions (I'm sure you've seen this layout before). I'm trying to link the questions to anchors set to specific rows in my table, and it's just not working. I use <a name="blah"> for the anchor and <a href="#blah"> for the link...and what it does is take me to the very top of the entire table. Every link, every time. Regradless of where in the table the anchor is declared it just takes me to the top of the table. The table scrolls about 1.5 screens, so it should be going further. I placed a tag just after my </table> and just before my </div> and it worked perfectly, took me right to the bottom of the page. But when I moved it to just inside the </table> it quit working, and took me to the top of the table. That was far too much for one paragraph...sorry. Now, understand that I'm not using a table for the "question link" part of the page, only the "question/answer" part. I just can't figure this out, and it looks too nice in the table to go trying to do it all with css. The rest of my site so far is pretty much tableless, and I'm pretty new to css. The reason I'm asking here, is I figure it must have something to do with the css since I've seen the same code work fine on a table layout. Sorry if this is a dumb question, or if I should ask it somewhere else. I'm just losing my mind. i have a horizontal navigation pane in which i want 5 links to be placed across the top. any ideas? ive tried setting the width a percentage and a fixed width but no luck. width:50px; There's a weird bug with named anchor which I'll describe in detail (screen shots will also follow) for posterity as the example page will most likely change : there's a header div followed by a main div containing a centered div with a right sidebar div floating on the left. In the content div there's the page description followed by a picture gallery including a full size image with some thumbnails on the side included in the div which the thumbnails are linked with it as a named anchor. The problem lies that when the named anchored is referred to (linked) it's pushed all the way up right next to the header div ; not only the content div but also the sidebar which I think is weird. I've tried setting margin-top higher than the header div just in case this case broke the normal flow of blocks (which its end sets the beginning of the following content) but whatever margin I set the behavior remained the same. I noted the behavior in FF2, FF3 & Safari 3.2.1 although IE6, IE7 & Opera 9.63 doesn't have the behavior as I'd like to end up with (as with IE). Sadly the forum rules forbid me from posting links, but I would be happy to send them to you privately. Please note that it's my first time posting on this site and that I've searched the subject in vain prior to starting this new thread. Hi, I am trying to position a image after the text link. If the link is in a single line then it works good, but when it goes to next link then the image disappears. This is the code: Code: <style>
.master {
font-family: arial;
font-size: 12px;
width: 200px;
}
.master a{
font-weight: bold;
color: #999;
text-decoration: none;
background: url(1px.gif) no-repeat fixed right bottom;
padding: 0px 15px 0px 0px;
}
.master a:hover {
text-decoration: underline
}
</style>
<div class="master">
<a href="#">Link Title: Cascading Style Sheets (CSS) forum</a><br/>
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc. can be found on the "learning CSS" page. For background information on style sheets, see the Web style sheets page.
</div>
Please advice. Thanks in advance. Is it possible to apply an A style inline? Eg inside a tag? You can do this obviously: Code: <div style="background: url(blah.gif);">blah</div> But is it possible to apply an A (anchor) style in the same fashion. I do have a very valid reason to do this; being that I need to slide a background image using background-position, but the image is not known until the page loads..... Thanks for any pointers. Hello, I want to have every anchor in a paragraph have this effect when mouse-overed. p a:hover {background-color:#00bff3;color:#fff;} It works fine but what I didn't think about was any image I may put into a paragraph that is wrapped in an anchor will also get it. How can I exclude anchored images in paragraphs from this effect? This one has me completely baffled. IE6 and 7 are not seeing the following link. This is from the IE6 view source: Code: <div class="corner-login" <a href="/account">Login</a> | <a href="/user/register">Join</a> </div> The word 'login' renders on the left but no link, just dead text. The join link on the right works fine. I cannot for the life of me figure out why. Do you see something that I don't in this code? Anyone have any idea what could be going on? I'm not extremely familiar with CSS, as I've only used a few simple implementations of it. Please move this if it's in the wrong place, but I was wondering if it was possible to alter the behavior of <a> tags so that when clicked, instead of loading the page specified in the src, it executes a JavaScript function, providing the src for a value. It seems to me that this would be done through CSS. I could go through and replace each "src='src'" with "onClick='function(src)'", but there are far too many pages, each with far too many links, to edit. So it seems it would be easier to simply import a CSS style in each page that'll have the same effect. Any ideas? Does anyone know if there is a css property that applies to links that are linked to anchored tags on the page? Can there be a selector just for links that go to an anchor tag? I don't want to use a seperate class for only those links. thanks This is a simple question. In my menu system, I want my "items" to look like links. I've put the text in an Anchor tag... but I then get the, for this time at least, undesired blue underline action going on... What CSS do I need to use to prevent this. I want my <div> tag and/or my <a> tags to not change... Thanks. |
|||||||