Hi there,

I'm finally trying to do things the "correct" way and building a lyout out with CSS instead of tables.

Please look at http://www.gkmedia.co.uk/AR-JAN/

the blue box in the top left of the page has a small amount of text in it but it wont span the whole of the box... there donsn't appear to be any padding set in the box #intro_left so what could be causing it?

Many thanks

Ahh.. but there IS padding there:

#intro_left p {
margin:0pt;
padding:14px 15px;
}

I'm finally trying to do things the "correct" way and building a lyout out with CSS instead of tables.

YAY !! Glad you came away from the dark side

You need to get rid of that position:absolute on #welcome_text, it's all messy in Firefox and out of place. Besides, you can't float an element AND position it absolutely.

Originally Posted by LadynRed

You need to get rid of that position:absolute on #welcome_text, it's all messy in Firefox and out of place. Besides, you can't float an element AND position it absolutely.

Ah glas you mentioned that... I had real problems getting the block of text to appear in the right place...

How exactly should i go about entering some text that "floats" where i need it to?

Also, I now have a strange problem where i can see the light blue css button round "test link 1"
when im previewing in DWCS3 but it wont show up in a browser??

How exactly should i go about entering some text that "floats" where i need it to?

That kinda depends on the layout. A float would do it though. In some cases though you might need to use position:relative or position: absolute.

I don't even see the code for the button you're referring to .. ??


Oh, and if you're going to use XHTML Strict as your doctype, you can't do this:
<div align="center"> - that is presentational and needs to be done in your CSS.
You also cannot use 'target="blank"', target is not support in that doctype.

blimey, theres so much to learn with all this!

i think the html code for the button is

 <div class="buttonwrapper"> <a class="squarebutton" href="#"><span>Test Link 1 </span></a> </div>
    <p class="squarebutton">&nbsp;</p>
     </div>

and css is

a.squarebutton{
background: transparent url('./media/square-blue-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}

a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*button text color*/
}

a.squarebutton span{
background: transparent url('./media/square-blue-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.squarebutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

ok, its all working now by removing

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

Now you can see the blue button on the left of the page, which was always there in DW view... any ideas why removing that bit of code has fixed it?

Also i have inserted a table 2 colums by 2 rows, in the "leisure products" area to show how i want the layout to be - the question is.. how can i do that in CSS??