CSS - Created Link On Image Doesn't Behave In Ie

Hi!

How does padding and margin on text and images behave? And on other inline elements?

Didn't get it to work in IE6.

Thank you

I'm fighting with this for a while now. I want to change my table layout into div based one, but keeping all the positive features of table design. The layout is based on percents and em (the liquid philosophy)

The problem:
Make div resize like table cell with minimal width equal to width of widest unbreakable element. I don't want my "verylongunnecesaryword" stick out of menu div nor dissapear partaily when resizing the window. I basically want the menu to always stay wide enough to accomodate the longest word and resize dynamically with window and fonts. There is no such problem when using tables, cells automatically resize to fit content and never become so small that content sticks out or disappear.

Setting the min-width with either em, px nor percent is a no go, because it's impossible to tell what size will the biggest element be. No javascript either. Also keeping it IE6 complaint would be good. I still think that tables are the best idea and unless someone shows me how to fix this problem with div and css, I'm just sticking with tables till the end of world.

shortened HTML:
Code:

<div class="menu">
menu here
</div>

<div class="contents">
the rest of page
</div>

shortened CSS:
Code:

.menu
{float: left;
width: 20%;
padding: 1%;
}

.contents
{float: left;
padding: 1%; 
width: 76%; 
}

CSS:

Code:

.news {
  background-color:#eaeaea;
  border: solid 1px #999;
  width: 500px;
  margin-top: 10px;
}

.news img {
  float: left;
  padding: 10px 0 10px 10px;
}

.news p {
  float: right;
  width: 350px;
  margin: 0;
  padding: 10px 10px 10px 0;
}

HTML:
Code:

<div class="news">
<img src="http://album-images.lala.com/servlet/ArtWorkServlet/432627039265781052/l" width="120" height="180" />
<p>One of the most impressive flights ever has to be landing at Male airport in the Maldives. As the plane descends, stretching before you is a sea of azure blue reefs and atolls. The engines ease off and the plane gently floats down, almost skimming the water before finally touching down. Male airport sits on it's own private Atoll so transfers to your hotel are either by speedboat or, if you're lucky, by sea plane. Beats descending into Heathrow airport and then fighting your way to the train or bus station any day.</p>
</div>

Logically, a grey box should wrap around it. Can anyone explain to a CSS newbie why this doesn't work?

I am wanting to display an image as a background. However that isn't working for me. So can someone please help me solve this problem? Thanks in advance.

This is the css code that I am working with:
Code:

body {
	background-image: url(cattle_bg.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	margin: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

This is the link for that css code which is the htm file:
Code:

<link href="/images/styles.css" rel="stylesheet" type="text/css" />

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(!)

Okay the backgroundimage "content-header" does not display in firefox for the <div id="contentWrapper"> tag. In internet explorer it displays. Not sure what the hell is going on with it.

I hate css

http://www.mgan.net/work/10-06-04/layout1.html

There is the link, I have my styles in the header section of the html file.

I got this WP style, and I edited it quite a bit.


Code:

#menu {
	clear: right;
	float: left;
	position: relative;
	padding:0 10px 0 10px;
	margin:0 0 0 34px;
	width: 160px;
	/* border-left: 1px solid #bbaf95;
	border-right: 1px solid #bbaf95; */
	background: #fff rl(wp-images/bg.png) repeat-y 100% 0;
}

The problem being is that the image border does not reach the where the css borders were, and it does not stretch 100% to the bottom either. Even more, it takes three seconds to load from where it use to take less than one.

Check it out: http://randomized.us

Thanks in advance.

Hi, the new Drupal site I've developed is artemis2taste (dot) gr for an ice cream shop in Greece - The site loads fine in Firefox, Chrome and Opera but not in Internet Explorer (versions 6,7,8). I would appreciate it if you could visit my website and take a look at my css. The main content area is divided in two columns by the "composite layout" module. The "last" column (the one on the right) contains collections of images for each one of the site's pages. I've used a jQuery script to make a slideshow with simple next/previous buttons for the photos that appear there. The problem is I tried so many combinations of floats, padding, margins, inline etc for the right column and the photos keep stacking one below the other (you can only see a small part of the second image, as I have a fixed height for the container div), also hiding the slideshow navigation links. I can't find a way to make these images appear on the same horizontal direction... I would really appreciate suggestions on how to solve this issue...
Thanx in advance

Hi!
I have a css file (validated) which contains:
Code:

TD.p1{ text-align: left; background-image: url('http://local/adres/img/szablon/1/g_1.gif'); } 

this works properly with
Opera 7.54, Mozilla, but it doesn't work with MSIE!
Only in MSIE I can't see the background image.

Does anybody knows what may be wrong?

MSIE version: 6.0.2600.0000

I'm creating an email template for all mail that I'll send to my users. I'm trying to make it work for as many mail clients as possible, so I'm only using inline css. Even with that, it appears that gmail doesn't support the background-image property. I have a table defined as

Code:

<table style="background:#666666; background-image:url(http://{$_SERVER['SERVER_NAME']}/images/bg_grad.gif); background-repeat:repeat-x; width:100%; height:100%; margin:0px; " cellpadding="0" cellspacing="0">
...

This works fine for yahoo mail. With gmail, it will render "background", but as soon as I try and add an image, it ignores all of the styling. Has anybody run into this problem? Any suggestions on a solution would be greatly appreciated.

I hardly ever use css for thimgs like backgrounds, but I have a freelance client that has alot of interesting ideas about how a good website should look so I'm trying to make him happy.

When I have:
body {
background: url('resources/assets/background.jpg') no-repeat bottom left;
}

in the extranal css it doesn't work. If I put it into the page it works fine. None of the online css resources I've looked at mention why this should be. I've even tried using the complete http://www.server.com/blah/blah/ address and I get the same results.

Does this just not work from an external css, or am I missing something?

Thanks y'all.

Hi,

I would like to make a html 'button' tag of 'submit' type look and behave like a html hyperlink.

(For those who would be curious, the reason is that I want to pass a variable to the target script, using the post method rather than appending a name-value pair to the hyperlink url, while keeping a conventional presentation. In the end, it should make the passed variable less visible for the end user, except of course if they look at the source code and look for a hidden input).

I considered to use the CSS2 system colors codes, but I did not find a code for hyperlink, and anyway, system colors will be deprecated in CSS3, so it is no good idea if I want to make my pages portable in the far future.

I tried to use the appearance property from CSS3, but it does not seem to be wel implemented yet in current browsers.

For now, I just styled my html button, removing border, and setting the background and foreground colors to something similar to an hyperlink, but then I have no guarantee that this will match the actual look & feel in the end user's browser.

Any hint or suggestion ?

I'm trying to style all images that have link around them - to have no border nor background. I'm using the following but no luck:

PHP Code:
 a:link img, a:visited img {
        background:none;
        background-color:transparent;
        margin:0px;
        padding:0px;
        border:none;
}

a:hover img, a:active img {
        background:none;
        background-color:transparent;
        margin:0px;
        padding:0px;
        border:none;
} 

OK I am pretty new to CSS. I am working with my first CSS layout...

I am trying to make some images on a page, links. However the problem I am running into is that the images are getting a link border around them, which I do not want.

Is there any way to specify this not to happen for images?

Any input is greatly appreciated!

~Una

I'm having another link issue. I have images in a <ul> that are links. (It's a gallery using Slimbox + Mootools). Everything looks fine in FF. However, in IE, I get these little maybe 2 or 3 pixel (width) link lines that are blue and then purple when visited. They are not on every image. In fact, my <ul> has 4 lines of six images, and the little extra pixel lines fall in the margin after the first image of every line. Here's my CSS:

Code:

a img {
  border: 0 none;
  margin: 4px 4px 10px 4px;
  text-decoration: none;
}

a:hover img {
  border: 1px solid #e5cb43;
  margin: 3px 3px 9px 3px;
}

ul.photog  {
			list-style-position: outside; 
			padding: 0px; margin: 0px;
			border: none;
			background-color: #979089;
			width: 850px;
			text-align: center;
			margin-right: auto;
			margin-left: auto;
	
			
		}

		li.photog  {
			margin: 0px;
			padding: 0px;
			list-style-type:none;
		}	

Strange thing is that I have another <ul> that uses identical code to that one and doesn't have the problem I am experiencing with this one. Any help would be greatly appreciated. Thanks in advance!