|
CSS - Why Is This Link Broken In Ie? (image Inside Span)
When clicking on the image in code below the link is not working in IE (6.0), works fine in FF and OP.
The odd thing is that in IE when you right-click the image you can open the link by selecting "Open link" or "Open link in new window". So the link is there for IE as well, but not working when clicking on the image. Why is it so. Workaround needed... Any fix for this without having to remove my SPAN tags? The HTML also validates without any errors. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <TITLE>Link over image is not working in IE. (Tested in IE 6.0)</TITLE> </head> <body> <div> <br><br> <span style="display:block; width:200px; background-color:gray;"> <a href="image-link-bug.htm" style="text-decoration:none;"> <span style="cursor:pointer; display:block; text-align:left; padding:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" width="40px" height="40px" alt=""> </span> <span style="display:block; color:white; font-family:arial, sans-serif;"> When you click on the image to the left the link does not work in IE 6.0. If you click on this text it works fine. Why is that. It works great in FF and OP though.<br><br> Is there a fix for this without having to remove my SPAN tags?<br><br> NOTE: If you right-click on the image in IE and select Open link, or Open link in new window it works, also in IE.<br><br> For me this looks like a bug in IE.<br><br> I'm looking for a fix/workaround to make it work, and yes, with the span tags :-)<br><br> And please, do not bother about the other code here, e.g. the input at the end of page etc. </span> </span> </a> </span> </div> <br><br> Name:<input type=text size=30 value=""> </body></html> Similar TutorialsHi, first of all i'm a bit new to this, but not a Compleet noob. pls be kind Ok, so my issue is i have a type of image gallery made with spans. I have the span tags enclosed by the <a href> tag. Spans are floating. The reason for this is that I want to have the border change colors on hover, wherever the pointer might be located in the span. It works great in firefox and IE8, but i just discovered this morning, much to my dismay, that it doesn't work in IE7 or below. of course it was the person i'm making the web page for that pointed this out, go figure. The problem is that eventhough IE shows that it is a link, when clicking on the image, nothing happens. text works find, the area around image and text works fine, just not the image. I tried searching google for a couple hours and could not find a fix that didn't involve javascript. I'm trying to avoid JS as much as possible, and so far all has gone well. Ok down to the nitty gritty. I stripped down the html so that it just shows one of the spans, so if you drop the code into notepad and save as htm you can play with it. css link is complete to my hosted css file. honestly im not sure why im using that doc-type, i don't completely unerstand the mechanics, i just thought for no sound reason at all that it would be better than html doc type. xhtml 1.0 validates and css validates as 2.1. Code:
<?xml version="1.1" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Bella Luna Gifts for the Soul - Wands</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.bellalunagifts.net/main.css" />
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;}
#menu ul {text-align:left;}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 12px/16px arial, "lucida console", sans-serif; padding: 3px 2px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-container">
<div id="content">
<a href="http://www.bellalunagifts.net/rose_quartz_healing_wand.htm">
<span class="thumbnailleft"><img class="image" src="products/tn/rose_quartz_healing_wand.gif"
alt="Rose Quartz Healing Wand" width="150" /><br/><br/>Rose Quartz Healing Wand<br /></span></a>
</div>
</div>
</body>
</html>
If you just wanna glance at the css affecting the span and image, here it is. Code:
.thumbnail {
float: left;
width: 150px;
height: 210px;
margin: 0 20px 15px 0px;
padding: 5px;
text-align: center;
border-style: ridge;
border-color: #3333FF;
text-decoration:none;
}
a {text-decoration: none;color: #000000;}
a:link .image {border-style: none;}
a:active .image {border-style: none;}
a:hover .thumbnailleft {
border-color: #00CCFF;}
a:hover .thumbnail {
border-color: #00CCFF;}
a:visited {text-decoration: none;color: #000000;}
a:visited .image {border-style: none;}
and i dont know why my docs are .htm instead of html.....long time ago i had a reason that may or may not have been valid but i should probably change to .html, yeah? well the link to the page im working on is http://www.bellalunagifts.net/wands.htm this is the last immediate piece of foundation code that i need to figure out to start rolling out the rest of the website. this is the first time i've posted for help, i really do try to figure out stuff on my own, but am ready to throw my head through the screen right now. and hell, if i'm goin about this in a silly way, pls tell me. i always welcome criticism. any help would be much much appreciated. i'm gonna keep trying to figure this out, but i'm hoping that one of you already knows what i'm doing wrong. i know my css code is probably redundant in places, but for now i'm just working on getting things to work. thx in advance for any reply. Greetings, I am guessing I am "doing it wrong" but I am trying to get a dynamic double background for a button and it works fine in FF but not IE8. When rendered in IE8, the 2nd div wraps under the first, no matter what I have tried. Span's don't work either. If I nest the verbiage in the icon div, ie8 reads the width from the image and make the button too small. Code: <div class="btnContainer flLeft"> <button type="submit"> <div class="flLeft imgLogin typeIcon"></div> <div class="flLeft boldText">Search</div> </button> </div> I believe it's unusual to nest divs/spans inside a button, but I would really like to be able to do this since it matches most of my other links. Is there a better way for me to do this? css: Code:
button {
-moz-border-radius:4px 4px 4px 4px;
outline: 1;
border: 1px solid #c4c4c4;
background: #ccc url(/includes/images/sys/btn_bkg1.png) repeat-x;
color: #444444;
margin: 0 0 0 2px;
padding: 2px 14px 2px 2px;
}
.imgLogin {
background: url(/includes/images/sys/key.png) no-repeat;
height: 16px;
width: 16px;
}
.typeIcon {
padding-right: 5px;
}
.flRight { float: right; }
.flLeft { float: left; }
Hi. See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should. Please also read some comments in the code. Code: <html><body><center><br><br> Why does image not force the outermost span to be at least as high as image?<br> If the text are long enough and gets below the bottom border of image it look good though.<br><br> NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br> In my real application I'm using an <a href=" ...> around the outer span in examples below.<br> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0"> </span> <span style="display: block; color: white;"> Text here. </span> </span> </td></tr></table> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left"> Text here. </span> </td></tr></table> </center></body></html> Hi all I am trying to take a link's ability to link away from a link by converting it to normal text ie, I am working on pagination for my blog and the navigation looks like this << Prev | 1-5 | 6-10 | Next>> its all done in php that i got from a book, but anyway, the script references a span class="inactive" so that when you are viewing 1-5 both the << Prev and 1-5 links are grayed out, since there is page previous to the page that displays 1-5 there is no need for that to be a link, nor is there a need for 1-5 to be a link since we are already there what i need is the style that would remove the linking property of those links and i got no ideas, Im bad in php and even worse in css Thanks in advance Hi I'm struggeling with the following: I have some span elements inside a td. If I apply padding to a span then the padding is flowing outside the td (above and below the borders of the td). Why does that happen and is there a way to make the td to autogrow to fit all the span's inside? Se example code below Code: <table border="0" cellpadding="0" cellspacing="0" align="center" style="width:300px; margin-top:50px;"> <tr> <td style="background-color:gray; text-align:center; border:1px solid black;"> <span style="margin-right:20px;">First</span> <span style="margin-right:20px;">1</span> <span style="margin-right:20px;">2</span> <span style="margin-right:20px; background-color:orange; padding:10px;">3</span> <span style="margin-right:20px;">4</span> <span style="margin-right:20px;">5</span> <span style="">Last</span> </td> </tr> </table> ******* UPDATE ******* I found this link today: http://css-discuss.incutio.com/?page=FormattingContexts which says (among other things): ************************* Only one thing impacts the vertical space between inline elements: the line height. Normally, the line height is based upon the line height for the text in that line, or the height/padding/border/margin of any replaced items. The element on a line with the largest line height or replaced height is the one to define the vertical space that line takes up. Height, padding, border or margins on text do not impact the line height or the container height. Instead, borders, padding and margins overlap from line to line. If you want to give an inline text element some padding and border, make sure you give it some extra line height, too, or else it will overlap with whatever else is above or below it. ************************* So does that rule mean that I have no way to make my TD autogrow in relation to the padding applied to the SPAN in the example above? Is there any working workarounds for this...? Can any of you tell me why with the a:link/visited set with border:none (as in the example at the bottom of the e-mail), I get a box around an image inside a link: <a href="communication.php"><img src="resources/president.jpg"></a> Working on a MAC, I noticed that the border only appears in Firefox but not in Safari, Opera and OmniWeb. Can anyone tell me why this border appears around the image, why only in FF, and of course, how one can make it dissappear using the stylesheet? STYLESHEET: a {text-decoration: none;} a:link { color: #000000; border: none;} a:visited { color: #000000; border: none;} a:hover { color: #bbbb00; border: none;} a:active { color: #000000; border: none;} .image{border-width:0px; border: none;} I have a <ul> list in which I set the opacity for the <li> elements. Inside the <li> elements I have <a> elements. The issue is that the <a> element text is inheriting the opacity for the <li>??? Here is a link http://casadelmar.tmhdesign.com Thanks. I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file. Here is a sample file: http://www. shawkey.com/test/imagebordertest.html Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS? I'm basically asking the same question as this post, but hoping that I can press for a better solution. I have an element which contains an image and some text, and I need that element to expand to the width of the image, not the text. The size of the image will change, so I can't set a fixed width on the containing element. The code I have which doesn't work looks like this: Code: <html> <head> </head> <body> <span style="display: inline-block; border: 1px solid black"> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio.</div> </span> </body> </html> The solution proposed in the post I linked to looks like this: Code: <html> <head> </head> <body> <table width="1"> <tr> <td> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio. </td> </tr> </table> </body> </html> The second example gives me the functionality I'm looking for, but I would really like to avoid using tables. I'm hoping there is a CSS solution to this. Thanks. Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) My page has: 1) a left-sidebar which goes from the top-left corner and stretches down 2) a top-bar which goes from the edge of the left-sidebar and stretches all the way across to the right side of the page 3) a main content which covers the rest of the page I want to place an image in the center of the top-bar but so far it only is centered when the window is maximised...I want it to be centered no matter what size the window is. currently my css rules a Code: #topBar {
position: absolute;
height:15%;
text-align: center;
left:30%;
margin:0px auto;
}
the xhtml source code for the topBar and image is: Code: <div id="topBar"> <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p> </div> (the image id is just concerned with the size of the image at this time) any suggestions as to how to I can have the image centered within the <div>? some bright spark on Yahoo Answers failed to spot that I'm using xhtml (which tbf is only mentioned once) and told me to try: Code: <div id="topBar"> <p><center><img src="../logo1.jpg" alt="..." id="sirgLogo"/></center></p> </div> or Code: <div id="topBar" align="center"> <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p> </div> Unless I'm mistaken, these are possibilities which will cause w3's validator to throw up an error. For the record I'm using XHTML 1.0 Transitional and I presume my doctype declaration is correct as it was automatically generated by dreamweaver when I first made the document! Hi. K, I have NO idea where to begin on this one. I need to display a series of thumbnails (to be selected dynamically from a database) inside 1 <td> tag. I need them to be organized 3 wide by 3 high, with their titles underneath. What would I use for this? I"m assuming I just set up a new class for that, but I don't know what to do for it. Any help is greatly appreciated. This is probably a dumb question, but I have a div, with a floated image inside. When the div doesn't have enough text inside to make it taller than the image, the image will stick out the bottom of the div. I've attached a couple of images to show what's happening. I want div to stretch around the image at all times, even if there's only one line of text next to it. Code:
<html>
<head>
<style>
body {
width: 800px; /* change this value */
margin: 20px auto;
}
#container {
border: 1px solid #f00;
padding: 10px;
}
.floatright {
float: right;
margin: 10px;
background-color: #aaf;
}
</style>
</head>
<body>
<div id="container">
<h3>some latin text</h3>
<p>
<img class="floatright" src="some_image.jpg" width="100" height="150" alt="Image" />
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.
</p>
</div>
</body>
</html>
Hi guys, I've been struggling with this for some hours now and can't get this to work... I'm no css expert but this is driving me mad... The problem happens in firefox3, in IE7 it displays fine. My code is (copied from firebug): <div id="mydiv" style="margin: 0px; padding: 0px; position: absolute; z-index: 1; opacity: 0.9; left: 763px; top: 143px;"> <div style="border: 1px solid rgb(68, 68, 68); padding: 2px; font-size: 7pt; color: rgb(68, 68, 68); white-space: nowrap; background-color: rgb(255, 255, 255);" id="otherdiv"> Text goes here </div> <div style="position: relative; top: -1px;" id="yetanotherdiv"> <img src="images/bico_w.png" style="margin: 0px; padding: 0px; width: 14px; height: 7px;"/> </div> </div> This is a balloon like tooltip, with a div on top with the text, and a div on the bottom containing the handle image, all wrapped by another nice div. In Firefox, there's space on top and below the image that I can't figure out where it comes from (no space in IE7). If I put a "vertical-align:top" on the image, it sticks to the top div correctly (both IE and firefox), but then I can't get rid of space BELOW the image. Can you help me figure this out? Hi, I need some help for aligning text inside a css box. let me first say, that i am using a wysiwyg editor and i am aware of this being a red flag for some folks .... to make my problem better understandable, please see following picture - this is how i want it to be: the area of interest is a 3 column box (left and right are fixed widths, middle column is variable), the middle box (highlighted in blue) is the box, which has a background picture ('Melanie Wanders') on the top/left .... then it has some text (one looong line) and also a picture to the right (alignment: right). what i wanted is, that when the user resizes the window, that the text is able to wrap around the image on the top right - and it does exactly that (you can also view the online version here) well, what happens is this: my problem: when i try to use the 'p' tags to enter a paragraph, it messes up the appearance in FF (completely) and it still shows the text right on the top, above the background image. I also tried to align the text line to the bottom of the box, but it wouldn't do so. i did also try to have the image ('Melanie Wanders') as an actual image aligned Top/Left, but it wouldn't wanna work for me with the other image next to it. i might get it to work, if this is my only option .... finally, here the code used (you will also find the code online, if you follow the above link) Code:
.inner_middle_content_row { width: 100%; height:300px ; }
.inner_middle_content_row_left { background-image: url(images/inner_table/left.png); background-repeat: repeat-y; background-position: right 0; width:125px; height:300px; float:left; }
.inner_middle_content_row_right { background-image: url(images/inner_table/right.png); background-repeat: repeat-y; width:20px; height:300px; float:right; }
.inner_middle_content_row_middle { background-color: white; background-image: url(images/about_us/melanie_title.jpg); background-repeat: no-repeat; background-position: left top; width:auto; height:300px; margin-left:125px; margin-right:20px; }
Code: <div class="inner_middle_content_row"> <!--agl:cssobject id="inner_middle_content_row" type="Column Middle Scale" /--> <div class="inner_middle_content_row_left"> <p class="submenu_brown">Melanie Wanders</p> <p><a class="submenu_gray" href="wilhelm%20wanders.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Wilhelm Wanders</a></p> <p><a class="submenu_gray" href="philosophie.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Philosophie</a></p> <p><a class="submenu_gray" href="history.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">History</a></p> </div> <div class="inner_middle_content_row_right"></div> <div class="inner_middle_content_row_middle"> <img src="images/about_us/melanie_portrait.jpg" alt="" width="160" height="180" align="right" border="0" />Chef Melanie Wanders received her Culinary Arts and Management degree .... their own hand-made chocolate company - Wanders Artisan Chocolaterie.</div> it would be great to find a solution to this - the easy way out would be to just skip the background image and have the text start right on top left .... but i like the idea of having a nice title like this - please tell me your opinion though another thing i realize is, that the whole alignment is off in IE ... this is an issue i think i have read before and it has to do with this 3px or 5px off thing in IE right? i think i will look into this some other time. Thanx for reading this - please bare with me, as my mother-language is not english and i might have expressed myself not clearly Supposing I have an image that is 200x200 pixels, and I have a div that is 100x100 pixels. I want to place the image inside the div AND have all 4 corners of the image visible. How do I do this? The idea is to fit the image inside the div without the image looking like it got "cut off" on any of its edges. I tried simply changing the CSS width and height but that did not achieve the desired effect. I'm hoping I won't need 4 divs, one for each corner? How do i center the image both horizontally and vertically.... I have read the < ALIGN > has be depreciated and must use style, but STYLE="vertical-align:middle" dpesnt seem to work in either/both the < DIV > and < IMG > tags I am using an external CSS with a hiehgt of 168px, and calling the < DIV > block, then just using a < IMG > tag. How can i align the image int he middle?? I'm pretty new to using CSS so please be gentle I'm trying to hack (develop is to lofty a word at this point) this tableless page and get the bg image to stick to the right/top corner of the "content" div. IE6 renders it pretty well but Firefox (my preferred browser) is horrendous. The image size is 400x392. Any thoughts or a good reference on this would be greaty appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" /> <style type="text/css"> #container { width: 760px; width: 780px; width: 760px; border: 1px solid gray; margin: 10px; margin-left: auto; margin-right: auto; padding: 10px; } #banner { padding: 5px; margin-bottom: 5px; background-color: rgb(213, 219, 225); } #content { padding: 5px; margin-left: 215px; background-color: gray; background-attachment: fixed; background-image: url(images/bg_run.jpg); background-repeat: no-repeat; height: 400px; background-position: right top; } #sidebar-a { float: left; width: 200px; \width: 210px; w\idth: 200px; margin: 0; margin-right: 5px; padding: 5px; background-color: rgb(235, 235, 235); } #footer { clear: both; padding: 5px; margin-top: 5px; background-color: rgb(213, 219, 225); } </style> </head> <body> <div id="container"> <div id="banner">Banner</div> <div id="sidebar-a">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </body> </html> Hey all, I have a position div with a background image that sits just above and to the right of a text box. The image appears higher because I want it to overlap the text box. Most of the area that overlaps the text box is transparent. My problem is the transparent area makes it so you have to click the on the left side of the text box to place the cursor inside. Is their any way to make it so the transparent areas I can click inside the text box while leaving the image appearing over the text box? Thanks Hi http://www.sential.co.uk/releases.html http://www.sential.co.uk/style.css the box model is based on the thrashbox it works fine on the other pages, except the releases page where there is an image at the bottom of the box. It has the incorrect alignment on the left border. And only in IE Any help would be very appreciated. -Luke |
|||||||