CSS - Veritical Text Position In Span Ie Vs Others

I have a really wierd problem.
I want to work with div's inside div's, so i will be able to make content scrollable.
But i have this problem.
(It is really hard to explain this without showing screenshots so i try to bend the forum-rules a bit )

scalesmusic DOT dk SLASH problem DOT jpg

As you can see, theres an empty line before my headline. The stylesheet for this page is as follows.

body { background-color: black;
background-image: none);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
margin: 10px;
scrollbar-3dlight-color: #ff6600;
scrollbar-base-color: black;}
div { -moz-border-radius: 9px;
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: white;
background-color: #222222;}
div div{-moz-border-radius: 4px;
padding: 0px;
border-style: solid;
border-width: 1px;
border-color: white;
background-color: #222222;}
p { font-family:courier new;
font-size:14;
color: white;
text-indent: 10px;}
a { font-family:courier new;
font-size:16;
color: #ff6600;
text-decoration: none;}
a:hover{font-family:courier new;
font-size:16;
color: #ff6600;
text-decoration: underline;}
h1 { font-family:courier new;
font-size:32;
color: #ff6600;}
h2 { font-family:courier new;
font-size:18;
color: #ff6600;}
h3 { font-family:courier new;
font-size:16;
color: white;}
h4 { font-family:courier new;
font-size:10;
color: white;
text-decoration: underline;}
img { hspace:20;
border-color: #ff6600;}
.boxVisible {display: block;}
.boxHidden {display: none;}

I've made a testpage too, to locate the problem.

scalesmusic DOT dk SLASH tester DOT jpg

Here's no problems!?!
The stylesheet looks as follows:

div { -moz-border-radius: 9px;
padding: 20px;
border-style: solid;
border-width: 1px;
border-color: blue;
background-color: white;}

div div { -moz-border-radius: 9px;
padding: 5px;
padding-top: 0px;
border-style: solid;
border-width: 1px;
border-color: black;
background-color: #666666;}

div div div{ -moz-border-radius: 9px;
padding: 10px;
border-style: solid;
border-width: 1px;
border-color: red;
background-color: #888888;}
p { font-family:courier new;
font-size:14;}
h { font-family:courier new;
font-size:24;}

Why this empty line?!? I have no idea what i am doing wrong!

PS: I really don't like to bend the forum-rules, but i can't explain this problem in words alone!

I am rotating text using the following (from Jonathan Snook's blog):

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);

...but my positioning does not seem to hold. I'd like the text to run along the left hand side of the window, so while this works when the text is NOT rotated:

position: absolute;
left: 0;
top: 0;
width: 100%;
height: 73px;

...when I add the rotation code in, the text is centered in the window. I figured that swapping the width and height would be the answer, since the box is rotated 90 degrees, but it results in unrotated text moved off screen.

I'm using the latest version of Safari for my testing, figuring I'd start by getting it to work there before moving to other browsers. Any ideas?

I am trying to make a rectangle with an image on the left and a horizontal list of anchor links on the right. Each anchor link should be a 32x32 px image with text underneath each image.

My problem is that the anchor links are not tall enough and the text is on top of the image instead underneath it.

Please help.

Code:

<style type="text/css">
.toolbar_list ul { float: right; text-align: right; margin:10px;}
.toolbar_list li{list-style: none;display: inline;}
.toolbar_list a { float: none; width: 32px; height: 32px; }

div.toolbarheader {line-height: 48px;padding-left: 55px;background-repeat: no-repeat; border-style:solid;}

.icon-32-delete    { background-image: url(stdimages/icon-32/delete.png); }
.icon-32-save    { background-image: url(stdimages/icon-32/save.png); }
.icon-32-new    { background-image: url(stdimages/icon-32/new.png); }
.icon-48-module    { background-image: url(stdimages/icon-48/module.png); }
</style>

</head><body>

<div class="toolbar_list">
 <ul>
  <li><a href="#" class="icon-32-delete delete" title="Delete">Delete</a></li>
  <li><a href="#" class="icon-32-save save" title="Save">Save</a></li>
  <li><a href="#" class="icon-32-new new" title="New">New</a></li>
 </ul>
 <div class="toolbarheader icon-48-module">Title</div>
</div>

Hi all.

I have a script that draws a calendar. I would like to be able to position the day number in the upper right of each table cell using CSS.

Note, each cell will also have an embedded table or just text showing events for that day, so I don't mind if the day number overlaps that table.

Ive tried doing something like this: PHP Code:
 td.dayNumJK {
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top: 1px;
    right: 1px;
} 



But it seems to ignore the style. I've tried all the possible position attribute values (static, absolute, relative, fixed) but it doesnt seem to work. Maybe this is not possible with CSS?

Any ideas how I can accomplish this?

i have a div tag absolutely positioned and inside that tag i ONLY have an image.

so if place it in some code like this:

Code:

<tr><td><div id="thetag"><img src="asdf.gif" width="10" height="20"></div></td></tr>

and following that right away, if i have another table row with whatever in it:

Code:

<tr><td>asdf</td></tr>

then what happens is that second row gets shifted up and gets put in place under the first row, making the image overlap the 'asdf'.

if i put at least one char after the image in the div, its fine and the second row will follow under the image on a new line like it should, but i dont want any text in there.

any ideas?

thanks

Assume the following image (created in photoshop) represents a text and image layout on a web page. What would the CSS code look like to accomplish the layout. I would like to control the distance between the image and the text. The text (PREV, TITLE, NEXT) may change, but the positioning should be maintained.

I want to create a div that goes right under an input, I can get it to look fine in FF but not IE using absolute positioning.

Is there anyway I can position the new div relative to the input rather relative to containers around it?

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.

Hello,

I'm new to css layouts.

I had to float:left every element so the heights stretch

problem is if the image in "page_c_left" is wider than 45% then "page_c_right" will automatically go on the next line. (in Firefox, IE seems to wrap the text without moving the element).


also, i wanted to have the content displayed first for non-css browsers, but the examples used position:absolute. when the impression i got was that float is preferable to position.

i'm very confused on which method to use for layouts.

what method would you use for complex css layouts? float, position or other?

this is code with the text wrap problem
Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">

#main_c {
  float:left;
  width:770px;
  padding: 10px;
  border: 1px solid black
}

#header_c {
  float:left;
  border:1px solid brown
}

#page_c {
  float:left;
  width:100%;
  border:1px solid red
}

#page_c_left {
  float:left;
  padding:10px;
  border:1px solid blue
}

#page_c_right {
  float:left;
  width:55%;
  padding:10px;
  border:1px solid green

}

#footer_c {
  float:left;
  border:1px solid yellow
}
</style>
</head>
<body>

<div id="main_c">
<div id="header_c">
THIS IS THE HEADER
</div>
<div id="page_c">
     <div id="page_c_left"><img src="../../photos/image.jpg" alt="image" /></div>
     <div id="page_c_right">RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
     ajshd hfhgg<br />lakshh  toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
     ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
     ajshd hfhgg<br />lakshh  toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
     ka u annf au ffsdjkfjs didjs dd sjskjdk<br />RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
     ajshd hfhgg<br />lakshh  toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
     ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
     ajshd hfhgg<br />lakshh  toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
     ka u annf au ffsdjkfjs didjs dd sjskjdk<br /></div>
</div>

<div id="footer_c">
THIS IS THE FOOTER
</div>

</div>

</body>
</html>

if you could help,
thank you

Greetings!

I am trying to position a transparent gif at the bottom of a page, repeating on the x axis, so that text scrolls behind it.

I have the gif fixed at the bottom of the page, but the text is still over top of it. I think I will need to create an element, position it at the bottom of the page, use the transparent gif for the background, and give it a z-index higher than zero, right? If so, I can't get it it to work!

What I am currently doing: Code:

body{
  background:transparent url('/flames.gif') center bottom fixed repeat-x;
}

I have having issues with IE displaying my page wrong.

The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site)

and the css can be found at
http://tampabay-online.org/cetr/cetr.css

It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top)

Any help much appreciated.

Code:

.content {
	position:relative;
	width:320px;
	margin-left: 125px;
	margin-top: 20px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:3;
}

#right {

	position:absolute;
	width:200px;
	top:20px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

Hello.

So I have this situation (on the right):
h t t p : / / img339.imageshack.us/img339/6958/1stb.png

and when I change my browser resolution, I get this (on the right):
h t t p : / / img35.imageshack.us/img35/3892/2ndhw.png

Is it possible to do that the image wouldn't change the place on a screen even you when change the resolution of the browser? And yes, the image must be behind the text.

Thanks in advance for any suggestions and tips.

Hi,

I am currently trying to produce a website using CSS style sheets.

I have used 'span' to position and align blocks of text on the page. All looks well, but when I try and validate the page I get an error message that says the <p> and <ol> tags cannot be used within <span> tags.

Can anyone suggest anyway round this?

Many thanks x

hi,

i have a chunk of dynamic text coming in. it can have html links in it. so something like:

'blah blah blah <a href="site">link text</a> blah blah'

im trying to stylize the dynamic text with CSS. i can get the font size and everything to work but i can't get the link text to behave like i want it to.

here's what i have:

PHP Code:
//the css class
.articleDesc
{
    font-family: verdana, arial, geneva, sans serif;
    font-size: 12px;
    font-weight: none;
    text-decoration: none;
    color: #000000;
}

//trying to make all links red, doesn't work
a.articleDesc
{
    color: #FF0000;
}

//php
print '<span class="articleDesc">' . $dynText . '</span>'; 





the links just come out default, ie. blue and purple...

anyone know what's wrong here?

Hi,
Code:

<tr><td colspan="2" height="5"></td></tr>		
<tr><td width="30%" align="right">City</td><td>This is supposed to be some content</td></tr>

How do I imitate structure of the table above.

In the example below the text between <span> if too long ends up on new line below <label>
How do I make sure that it stay on right side?
Code:

<div><label>City</label><span>This is supposed to be some content when too long appears below span not below label</span></div>

Thank you.