CSS - Ie Probs, No Bg, No Div Horizon Align, Knewb.

Hi i am currently designing my first webby with out using frams and tables for the layout (using dreamweaver 2004mx) and i am now using layers and css for the layout but my problem is this:

i used to use an iframe to link things from my nav bar to load in. but now i am not using frames is there anyway to make content load inside a layer on the page or do i have to make separate pages for each link and expect it to load a new page each time? i know that usin css is alot faster than using frames but even when linking to seperate pages you get that little blink as the pages switch....

any help what so ever would be much appreciated

thanks in advance

N3cr0

Hi Folks,
Anyone have any idea how I can solve this problem? I'll be most grateful. I'm trying to position a DIV element to the top-right of another fluid DIV? The blue-toned photo [please see screenshot] is going right outside of the white content area.

What it should look like

What it sadly does look like

If I get this working, will I have problems with the body text in different pages? Say, if there's no photo, can I get the text to move up automatically? The photo is not within the flow so I have the text at a fixed position.

Finally, the footer with [top-of-page arrow] seems detached when the browser is maximised.

Hoping someone can help - I've been at this a week.
John

The troubled site in question

First, regarding the float issue. I did so well on this site earlier with the floats that I zipped right through it in about an hour. Looked great. After more updating and revision, I discover that in IE6, it looks great, but Net7, Fire1, and Opera 6, the floats (left and right column) are driving into the subcategory header above.

I set the top margins for the floats to 85 pixels which makes it look ok in N/F/O, but lousy in IE. So I then used the * character for IE's setting. It looks fine.

Question though, what am I missing and must I create the two settings for the different browsers? I'm not quite sure what changes I had made caused such a different affect.

Secondly, when I open the site on IE, I get that stupid ActiveX message on top. What is causing this and how do I resolve it? That will be a problem and I guess is more of a priority to me than the floats.

Thanks to all for your help. I love this board!

Tim

Hi people

I have been developing a new cms system www.spindogs.co.uk

The pages work using an autostretch facility but for some reason Firefox,Safari and IE5 Mac wont stretch. The bacground stays a set length?

I initially thought it was the DOCTYPE so messed around with that but it doesnt seem to be that either?

Can anyone help me please!!!!

Hi. Three issues with this menu - I've been trying to get a horizontal hover/nested list to work where the submenus are displayed inline underneath the main menu.

1. I've got the arrangement fairly close in FF, but in IE the top level items are jumping around all over the place on hover.

2. The javascript came from alsacreations, and seems to work pretty easily, but the submenus fail to disappear on rollOut unless you are going to another of the menu items. Any ideas?

3. Do you think there is anyway of leaving the top level links in their "active/hover" state when the mouse has moved to the submenus? So the coloured background that appears on hover stays there whilst hovering over the submenus?

I've isolated the xhtml, styles and script into a page (it's a rework of a current page and is pretty incomprehensible in-situ!) at http://www.prioritypie.f2s.com/KSAV6/menuTest.html.

Cheers for any advice.

And I forgot to ask what the issue is with IE and transparent borders - they seem to appear black and of variable width!

So I've tried to make my site www.thespinzone.com
work for all browsers, but I'd settle for IE & Mozilla, however I have run into a big problem with IE (and it appears ONLY 7+) and Mozilla, all versions.
First the IE problem is that it's adding a horizontal scroll bar on my main page, not the others, and I can only assume it has something to do with the RSS headlines positioning?

screen shot 1

Now I'm having 2 problems with Mozilla:
1st: No matter how I try manipulate the CSS, the headlines won't float to the right, and they end up being squeezed next to my picture which is a waste of space and looks silly. Here is a screen shot of how it looks.
Ideally I want the headlines to be on the right hand sight of the page, as far as it can be. I WANT the layout to look, MINUS the horizontal scroll bar like that first IE screen shot.

2nd: clicking or right clicking on any of the 'headline' items, moves that entire part underneath my picture and I have no idea why? In case it doesn't do that with your mozilla version, here's a screen shot

The relevant CSS is on the index page so rather than me cut & paste it (unless that's preferred) then 'view source'.....

I appreciate any and all help and advice. Thanks

I have a header wrapper for a column heading that sets the width and background of the column header. In that column header I have a tag for the header title, which is aligned left.

Know, I find that the customer wants to add an "As of Date", on the same line, but wants it aligned right.

Is this even possible to do? I cannot seem to come up with the correct .css code that would allow me to do this.

html code

Code:

<div class="wide_column_header"><span class="headerbartext">Make Your Enrollment Selection</span><span class="headerbartextright">As of 3/31/2008</span></div>

css tags:
Code:

.wide_column_header {
  float:left;
  width:558px;
  margin:0 0 0 5px;
  background-image:url(../images/wide_header.jpg);
  height:21px;
  font-size:100%;
  font-weight:900;
  line-height:100%;
  vertical-align:bottom;
  color:#fff;}

.headerbartext {
  font-size: 12px;
  font-weight:bold;
  text-align:right;
  padding-left:15px;
  line-height: 140%;}

.headerbartextright {
  font-size: 12px;
  font-weight:bold;
  text-align:right;
  padding-right:15px;
  line-height: 140%;}

Hi,

I know this must be a real stupid question but I've tried loads of googling around and just cant figure out how to do this. Please could someone tell me what I'm doing wrong. I want the <a> to be aligned to the top right.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">

body {
	font: 12px Verdana, sans-serif;
}

.assignment {
	margin: 2px;
	padding: 4px;
	border: 1px solid;
	border-color: gray;
	background-color: lightyellow;
	text-align: left;
	width: 150px;
	height: 20px;
	vertical-align: center;
}

a.removeAssignment {
	align: top;
	padding: 1px;
	margin: 0px;
	border: 1px solid gray;
	position: relative;
	top: 0px;
	right: 0px;
	float: right;
	width: 16px;
	height: 16px;
	background-image: url('remove_icon.png');
	background-repeat:no-repeat;
	background-position: center;
}

</style>
</head>

<body>
<div class="assignment">Hello<a href="#" class="removeAssignment" /></div>
</body>
</html>

here is the page...
emarketing and design . com /spa/

Its the "sign up for specials and promotions" with sign up box..

how do I get it to flush right?

here is my css--it's "newsletter" (this is my first try with css - be nice)


p
{
margin: 0.4em 0.5em;
font-size: 0.85em;
}

a
{
color: #197EF1;
text-decoration: underline;
}

a:hover
{
color: #DF3A00;
text-decoration: none;
}

a img
{
border: none;
}

ul, ol
{
margin: 0.5em 2.5em;
}

h2
{
margin: 0.6em 0 0.4em 0.4em;
}

h3, h4, h5
{
margin: 1em 0 0.4em 0.4em;
}

*
{
margin: 0;
padding: 0;
}

body
{
background: #000000 0 0;
color: #a9a9c7;
font-size: 1em;
font-family: "Trebuchet MS", Tahoma, "Geneva CE", lucida;
}

#container
{
margin: 0 auto;
width: 770px;
position: relative;
}

#top
{
height: 50px;
background: url("image/top.jpg") 0 0 no-repeat;
}

#top p
{
margin: 0;
padding: 0;
}

#header
{
height: 150px;
margin-top: 0px;
background: url("image/header1.jpg") 0 0 no-repeat;
}

#menu
{
position: absolute;
top: 152px;
left: 0px;
}
#newsletter
{
position: absolute;
top: 0px;
}

#content
{
clear: both;
margin-top: 23px;
width: 770px;
background: url("image/content.gif") 0 0 repeat-y;
}

#text
{
width: 518px;
background: #313040 0 0 no-repeat;
color: #9c9cd0;
float: left;
}

#column
{
float: right;
width: 247px;
background: #414169 url("image/column.gif") 0 0 no-repeat;
}

#content-bottom
{
clear: both;
display: block;
width: 770px;
height: 13px;
background: url("image/content-bottom.gif") left bottom no-repeat;
font-size: 0;
}

#footer
{
margin-top: 5px;
padding-top: 2px;
height: 33px;
background: url("image/footer.png") left bottom no-repeat;
}

#header h1
{
margin: 5px 0 0 50px;
padding: 0;
font-size: 1.2em;
}

#header h2
{
margin: 10px 0 0 90px;
padding: 0;
font-size: .3em;
color: #9c9cd0;
}

ul#menu
{
margin: 0;
}

#menu li
{
list-style-type: none;
float: left;
text-align: center;
width: 80px;
margin-right: 1px;
font-size: 1.05em;
}

#menu a
{
display: block;
height: 18px;
padding-top: 1px;
text-decoration: none;
background: #414169 no-repeat 0 0;
overflow: hidden;
width: 100%;
font-size: .75em;
font-family: Verdana, "Geneva CE", lucida, sans-serif;
color: #fff;
}

ul#newsletter
{
margin: 0;
}

#newsletter li
{
list-style-type: none;
float: right;
text-align: center;
width: 290px;
margin-right: 0px;
font-size: 1.05em;
}

#newsletter a
{
display: inherit;
height: 18px;
padding-top: 1px;
text-decoration: none;
background: #414169 no-repeat 0 0;
overflow: hidden;
width: 100%;
font-size: .75em;
font-family: Verdana, "Geneva CE", lucida, sans-serif;
color: #fff;
}
#menu li>a, #menu li>strong
{
width: auto;
}

#menu a.actual
{
background: url("image/menu-actual.gif") no-repeat 0 0;
color: #952020;
}

#menu a:hover
{
color: #ff5900;
}

#column p
{
font-size: 0.7em;
}

#column ul
{
font-size: 0.8em;
}
#column h2
{
position: relative;
height: 26px;
width: 215px;
margin-top: 40px;
padding-top: 6px;
padding-left: 6px;
font-size: 0.7em;
background: url("image/h3-column.gif") 0 0 no-repeat;
z-index: 1;
font-family: arial, "Geneva CE", lucida, sans-serif;
}
#column h3
{
position: relative;
height: 5px;
width: 215px;
margin-top: 4px;
padding-top: 2px;
padding-left: 6px;
font-size: 0.8em;
background: url("image/h3-column.gif") 0 0 no-repeat;
z-index: 1;
font-family: Arial, "Geneva CE", lucida, sans-serif;
}

#column h3 span
{
margin-left: 10px;
}

#column span.name
{
text-align: right;
color: #9c9cd0;
margin-right: 5px;
}

#column a
{
color: #9c9cd0;
}

#column a:hover
{
color: #9c9cd0;
}

#text h1,#text h2,#text h3,#text h4
{
color: #a9a9c7;
}

#text h3.headlines a
{
color: #a9a9c7;
}

p.comments
{
text-align: right;
font-size: 0.8em;
font-weight: bold;
padding-right: 10px;
}

#footer p
{
text-align: center;
}

#footer a
{
color: #9c9cd0;
}

#footer a:hover
{
color: #DF3A00;
}

#your-url
{
position: absolute;
left: 70px;
top: 15px;
font-size: 1.1em;
}

#your-url a
{
color:#9c9cd0; text-decoration:none;
}

#your-url a:hover
{
color: #9c9cd0;
}

ol.comments
{
font-size: 0.9em;
}

I can usually figure out most CSS problems but this one is a mystery.

The following creates a curved box by covering the corner with an image. The problem is in IE6.0, the corner images do not align at the top but display about 10 pixels below it, so therefore I have a the box line and corners at the top and then the curved corners below it. Other browsers display fine, including IE7.0.

Why is it doing this?

Here is the CSS:

Code:

<style type="text/css">
.contain {
position:relative; top:0; left:0; text-align:left; padding:0; border:1px solid #ccc; margin:0 0 10px 0; background-color:#fff; vertical-align:top;
}
.corner-top { display:block; font-size:0; line-height:0; margin:0; height:8px; width:100%; position:relative; top:-1px; right:-1px; background:transparent url(/images/crn_tr_bb.gif) no-repeat top right;}
.corner-top .corner-left { display:block; font-size:0; line-height:0; margin:0; height:8px; width:8px; position:relative; left:-2px; background:transparent url(/images/crn_tl_bb.gif) no-repeat top left; }
.corner-bottom { display:block; font-size:0; line-height:0; margin:0; height:8px; width:100%; position:relative; bottom:-1px; right:-1px; background: transparent url(/images/crn_br_bb.gif) no-repeat bottom right;}
.corner-bottom .corner-left { display:block; font-size:0; line-height:0; margin:0; height:8px; width:8px; position:relative; left:-2px; background: transparent url(/images/crn_bl_bb.gif) no-repeat bottom left; }
</style>

<div class="contain">
	<div class="corner-top"><div class="corner-left"></div></div>
    <div class="intro" style="position:relative;"><p>Text here...</p>
	<div class="corner-bottom"><div class="corner-left"></div></div>
    </div>

Hi,
How do I place "progress.gif" so that it is in the vertical middle in relation to <input type="text"
Right now it is OK in Interent Explorer 6 but appears too high in FireFox.
Code:

<div>
<label>City:</label>
<span><input type="text" name="city" /><span><img src="progress.gif" border="0" /></span></span></div>

I tried this to no avail.
<span style="padding-top:5px"><img src=...
Thank you.

Hey i'm new to this forum thing so here goes.

I'm stuck trying to align an image in the center of an e-mail template.
I'm using inline CSS to keep the template as small as possible.

The code i have is:
<img src="yes_group.jpg" alt="Yes Company Logo" height="100" width="50%" />

I need something i can put into that line of code to center the image. I've searched a few different site for hints (or the actual tag i need) but can't seem to find it anywhere.

Any help would be greatly received so if you have any idea's please let me know.

Thank You.

I have a problem where my image on top there is a little gap below it. This only happens in Internet Explorer and not Mozilla; i wish to rid of that gap. Also I am wondering how would I align the text on the right, i have tried applying the vertical-align: bottom but it does not work. Here is the link: http://www.bluebushel.com/temp/real.html The code is below.

MARKUP
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xml:lang="en">
 <head>
  <title>Bluebushel | The bushels are alright</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="includes/bluebushel.css" />
 </head>

<body>

<div align="center">
<div id="topBar">
<div class="logo">
<img src="images/testimage.jpg" alt="Bluebushel" />
</div>
<div class="nav">
View Bushel | Account | Order Status | Shipping & Returns | Help
</div>
</div>

</body>
</html>

CSS
Code:

body						{
								background-color: #E9E9DF;
								margin: 0em;
}
a.nav:link,
a.nav:visited				{
								color: #000000;
								font-family: Arial, Verdana;
								font-size: .8em;
								text-decoration: none;
}
a.nav:hover					{
								color: #336699;
								font-family: Arial, Verdana;
								font-size: .8em;
								text-decoration: none;
}

#topBar					    {
								background-color: #FFFFFF;
								border-left: 2px solid #C5C5C5;
								border-right: 2px solid #C5C5C5;
								border-bottom: 1px solid #EEEEEE;
								height: 5.79em;
								margin: 0em;
								padding: 0em;
								width: 50em;
}
#topBar .logo				{
								float: left;
								text-align: left;
}
#topBar .nav				{
								color: #E3E3E3;
								float: right;
								font-family: Arial, Verdana;
								font-size: .73em;
								height: 100%;
								text-align: right;
								vertical-align: middle;

Thank you for your time.

Hi,

I have this content

Lunch - Chinese
Drinks - Soda
Dinner - Italian
Breakfast - american


i want to align these choices

So

Lunch and drinks, Dinner, breakfast are one below each other and then the - and the corresponding choices

Right now it appears likes this

Lunch - Chinese
Drinks - Soda
Dinner - Italian
Breakfast - american


I want chinese, soda, italian and american all aligned one below each other

So i want all the dashes in center and then the content on side of them

can someone tell me how i can use css for it

charles

Basically on my main page the left menu and right content divs don't align, i need the rights bit to align with the lefts lower bit.

linky -> http://www.gamingonlinux.info/

css that controls them:
Code:

.left
{
	float: left;
	width: 152px;
}

.left_bg
{
	background-image: url(images/left.gif);
	background-repeat: no-repeat;
}

.left_bg p
{
	padding-top: 9px;
	padding-left: 6px;
	line-height: 150%;
}

.right
{
	float: right;
	background-image: url(images/content.gif);
	background-repeat: no-repeat;
	width: 748px;
}

.right p
{
	padding-left: 5px;
}