Css help - ie7

I setup the website www.footprintmedical.com and discovered that the CSS does not work correctly in IE7.
It seems to work with IE6, IE8 and all other browsers just fine.
Any suggestions?

I did have a container around that area called header. Header was set to height of 300px.
I created a new page http://footprintmed.com/index2.html with a new css file http://footprintmed.com/layout2.css where I set the header height to 450px. I must now test it on IE7 and other browsers to see if that fixed it. Hopefully, that will do the trick. If it fixed it, I will close this forum out.
This is what it looked like on IE7. It seemed that the text started at 300px.

Similar Messages

CSS Question: IE7 for Windows Not Behaving

Hi all,
I hope there is a CSS buddy out there today. I have a page that I've built using only CSS (New to doing this) and the page works in Safari, Firefox on both Mac and PC, but IE7 on Windows is rendering the logo/header/navigation wrong.
Maybe there is a better way to do this. I'm wanting the logo floated to the left so it sits over the borders on the header, navigation & main content box. I thought I was all clever when it worked on my Mac. It seems like it's a simple fix, but I just can't get anything to work. IE7 seems to not be floated above and is pushing the header and navigation to it's right. So the header and the nav are wrapping around the logo instead of sitting under.
Thanks for your help in advance!
Tim

GarryCT wrote:
IE does not implement floating correctly, although it usually doesn't cause problems. They misinterpret the w3c spec and float the element rather than the content. You could see this if you floated two adjacent divs with different background colors in different browsers. This may be part of the issue.
Can you post a reference for this and an example, please? I am unaware of such an issue as you describe.
I would recommend making the header section a wrapper containing your background. If you need to, you can position your background image relative to the right.
I believe that's already how it has been done.
To get around the IE issue, you may need to play around with relative or absolute positioning (relative to the header, not the body) to get the alignment you want.
Alternatively, you could create the header with the background image as indicated above, then within that, float the navigation element to the right (pushing it down by setting the top margin or padding) then follow them with the image tags without the div containers. They are inline so they will 'float' naturally. Set margins on the images to get your spacing between the images.
Hope that helps.
I don't see any help there. Sorry.

Problem with CSS in IE7

Hi ,
In my jsp page, am using a css class as below, it is working fine on IE6 but it is not coming properly on IE7. Please advise some one on this...
Thanks in advance....!!!
.movebutton
BORDER-TOP-WIDTH: 1px;
FONT-WEIGHT: bold;
BORDER-LEFT-WIDTH: 1px;
FONT-SIZE: 8pt;
BORDER-LEFT-COLOR: white;
BACKGROUND: url(../Images/movebutton.bmp) fixed repeat-x center 50%;
BORDER-BOTTOM-WIDTH: 1px;
BORDER-BOTTOM-COLOR: white;
TEXT-TRANSFORM: capitalize;
WIDTH: 20px;
COLOR: white;
BORDER-TOP-COLOR: white;
FONT-FAMILY: "Verdana";
HEIGHT: 20px;
TEXT-ALIGN: center;
BORDER-RIGHT-WIDTH: 1px;
BORDER-RIGHT-COLOR: white
}

What does this have to do with Java? These are Java forums.
And in anycase you haven't even specified a problem; and apparently you aren't aware that CSS doesn't render the same on all browsers just like some JavaScript methods are browser specific.

Using BrowserLab, comment conditional CSS [for ie7] on a local WordPress set up using MAMP

Hiya,
I have asked this on the BrowserLab forum but thought I'd ask here as well [you never know].
Trying to fix some IE7 issues on my WordPress site within Dreamweaver CS5/MAMP, I can't get BrowserLab to show any changes I make to the CSS file for IE7.
To test this MAMP set up and BrowserLab, I changed the body bg colour in the IE7 CSS file [to a turquoise like colour instead of gray] and it didn't render in BrowserLab - even after refreshing in BrowserLab [just got a white square].
After restarting the Mac Pro, it did render correctly - turquoise! At least I now know the link to the IE7 CSS file works. I'd prefer to not have to restart after every CSS change so is there something I've overlooked to get BrowserLab to render in IE7 after I've edited the IE7 specific CSS file?
Dreamweaver doesn't 'see' the IE7 CSS in the long list of CSS, PHP, JS and XML files in Live View but I can live with that.
Thanks
steve
http://www.stevedrake.net

Fixed [I think]. See: http://forums.adobe.com/message/3856510#3856510
steve
P.S. A sneaky PS; any ideas on how to get the side bar to the top of the page [level with left content] would be welcome - I've got it to sit on the right with a large left margin but it sits, vertically, after the left content but above the footer.

CSS and IE7 Issues

I have made a horizontal nav bar out of an un-ordered list,
and have use a 1 pixel boader between links instead od the pipe ( |
) character but in IE7 the padding acts different than in Firefox
and Safari. With this code the padding looks equal on both sides of
the vertical line in Firefox, but in IE7 the left hand side of the
links hug the vertical line.
Cheers for any assistance
Theminks
the CSS code i used:

Can you show us the page, please?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Theminks" <[email protected]> wrote in
message
news:f7q31f$i28$[email protected]..
>I have made a horizontal nav bar out of an un-ordered
list, and have use a
>1
> pixel boader between links instead od the pipe ( | )
character but in IE7
> the
> padding acts different than in Firefox and Safari. With
this code the
> padding
> looks equal on both sides of the vertical line in
Firefox, but in IE7 the
> left
> hand side of the links hug the vertical line.
>
> Cheers for any assistance
>
> Theminks
>
> the CSS code i used:
>
> #main_nav ul {
> height: 1em;
> vertical-align: bottom;
> left: 0px;
> position: relative;
> text-align: left;
> width: 800px;
> padding-top: 0.8em;
> padding-bottom: 0.8em;
> }
> #main_nav li {
> list-style-type: none;
> display: inline;
> border-right-width: 1px;
> border-right-style: solid;
> border-right-color: #FFFFFF;
> padding-right: 0.5em;
> padding-left: 0.3em;
> font-size: 16px;
> color: #FFEE29;
> }
> #main_nav .nav_rightlink {
> border-right-style: none;
> padding-right: 0px;
> }
> #main_nav .nav_firstlink {
> margin-left: 0px;
> }
>

SSI and CSS Help

I'm really hoping someone can help with this.
I have a couple of SSI's on a site I'm developing. They are
text only .html files that have links on them to other pages where
you can get more info.
My problem is that the page properties for my index.php page
override the CSS that I've created for the SSI's. I want the SSI
text to have it's own look, separate from what the look of the
index.php page is. Is this an easy fix or more major development.
I'm pretty new at all of this so talk to me like a child.
Thanks in advance for your help.

Put the CSS for the includes into the parent files. The
include files
should contain NO CSS.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"graphxguy777" <[email protected]> wrote in
message
news:eertmi$avr$[email protected]..
> I'm really hoping someone can help with this.
>
> I have a couple of SSI's on a site I'm developing. They
are text only
> .html
> files that have links on them to other pages where you
can get more info.
>
> My problem is that the page properties for my index.php
page override the
> CSS
> that I've created for the SSI's. I want the SSI text to
have it's own
> look,
> separate from what the look of the index.php page is. Is
this an easy fix
> or
> more major development. I'm pretty new at all of this so
talk to me like a
> child.
>
> Thanks in advance for your help.
>
>
>

Xml css help!

This is a multi-part message in MIME format.
------=_NextPart_000_0008_01C6AB1B.755FB0F0
Content-Type: text/plain;
charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
Yes I want to use css for this.
I have an xml doc being pulled into my flash. Text is fine
except =
wherever I try to assign a style. It's also defaulting to the
black =
color in flash (I couldn't find a way not to select a color
or style in =
flash for the font) instead of the blue specified in the css
doc. In =
that first image/description, it cuts off at the <em>
tag.
Please help me understand what I'm doing wrong.
XML doc:
<?xml version=3D"1.0" encoding=3D"utf-8"
standalone=3D"yes"?>
<?xml-stylesheet type=3D"text/css"
href=3D"xmlstyles.css"?>
<!DOCTYPE images [
<!ELEMENT images (#PCDATA)*>
<!ELEMENT pic (image, thumbnails, caption, desc)>
<!ELEMENT image (#PCDATA)*>
<!ELEMENT thumbnails (#PCDATA)*>
<!ELEMENT caption (#PCDATA)*>
<!ELEMENT desc (#PCDATA)*>
]>
<images>
<pic>
<image>images/0.jpg</image>
<thumbnails>images/thumbs/wickham.swf</thumbnails>
<caption>An Inspired Beginning</caption>
<desc>Edward Virginius Valentine was born in Richmond
in 1838. A visit =
to the 1853 New York World's Fair with his father inspired
him to become =
an artist. Valentine studied in Paris and Italy from 1859 to
1861. He =
was granted permission to study under Berlin sculptor August
Kiss, =
<em>who had created the piece that first ignited
Valentine's artistic =
inspiration, Amazon Attacked by a Tiger.</em> In the
spring of 1865, the =
deaths of both Kiss and his father, Mann Valentine, led him
to return to =
his home in Richmond, Virginia.
</desc>
</pic>
etc., etc., ...
CSS doc: (xmlstyles.css)
em {
font-style: italic;
para {=20
font-size: 12px;
desc {
font-size: 12px;
color: #0000CC;
------=_NextPart_000_0008_01C6AB1B.755FB0F0
Content-Type: text/html;
charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML><HEAD>
<META http-equiv=3DContent-Type content=3D"text/html; =
charset=3Diso-8859-1">
<META content=3D"MSHTML 6.00.2900.2912"
name=3DGENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY>
<DIV><FONT face=3DArial size=3D2>Yes I want to
use css for =
this.</FONT></DIV>
<DIV><FONT face=3DArial size=3D2>I have an xml
doc being pulled into my =
flash. Text=20
is fine except wherever I try to assign a style. It's also
defaulting to =
the black color in flash (I couldn't find a
way <EM>not</EM> =
to=20
select a color or style in flash for the
font) instead of the =
blue=20
specified in the css doc. In that first image/description, it
cuts off =
at the=20
<em> tag.</FONT></DIV>
<DIV><FONT face=3DArial size=3D2>Please help me
understand what I'm =
doing=20
wrong.</FONT></DIV>
<DIV><FONT face=3DArial
size=3D2></FONT> </DIV>
<DIV><FONT face=3DArial
size=3D2></FONT> </DIV>
<DIV><FONT face=3DArial
size=3D2><STRONG>XML
doc:</STRONG></FONT></DIV>
<DIV><FONT face=3DArial size=3D2><?xml
version=3D"1.0" =
encoding=3D"utf-8"=20
standalone=3D"yes"?><BR><?xml-stylesheet
type=3D"text/css"=20
href=3D"xmlstyles.css"?><BR><!DOCTYPE
images =
[<BR> <!ELEMENT images=20
(#PCDATA)*><BR>
<!ELEMENT pic (image, thumbnails, =
caption,=20
desc)><BR>   <!ELEMENT
image =
(#PCDATA)*><BR>  =20
<!ELEMENT thumbnails
(#PCDATA)*><BR>   <!ELEMENT =
caption=20
(#PCDATA)*><BR>
<!ELEMENT desc=20
(#PCDATA)*><BR> ]><BR><images><BR>   =20
<pic><BR>       =20
<image>images/0.jpg</image><BR>  <thumbnails>=
images/thumbs/wickham.swf</thumbnails><BR>    &=
nbsp;  =20
<caption>An Inspired=20
Beginning</caption><BR>  <desc>Edward
Virginius =
Valentine=20
was born in Richmond in 1838. A visit to the 1853 New York
World's Fair =
with his=20
father inspired him to become an artist. Valentine studied in
Paris and =
Italy=20
from 1859 to 1861. He was granted permission to study under
Berlin =
sculptor=20
August Kiss, <em>who had created the piece that
first ignited =
Valentine=92s=20
artistic inspiration, Amazon Attacked by a
Tiger.</em> In the =
spring of=20
1865, the deaths of both Kiss and his father, Mann Valentine,
led him to =
return=20
to his home in Richmond,=20
Virginia.<BR>  </desc><BR>   =20
</pic></FONT></DIV>
<DIV><FONT face=3DArial size=3D2>etc., etc.,
...</FONT></DIV>
<DIV><FONT face=3DArial
size=3D2></FONT> </DIV>
<DIV><FONT face=3DArial
size=3D2><STRONG>CSS doc:=20
(xmlstyles.css)</STRONG></FONT></DIV>
<DIV><FONT face=3DArial size=3D2>em
{<BR> font-style: =
italic;<BR>}<BR>para {=20
<BR> font-size: 12px;<BR>}<BR>desc
{<BR> font-size:=20
12px;<BR> color:
#0000CC;<BR>}</FONT></DIV></BODY></HTML>
------=_NextPart_000_0008_01C6AB1B.755FB0F0--

Thank you! I will check it out.
Raymond Basque" <[email protected]> wrote
in message
news:[email protected]...
>
>
> You need to load the stylesheet using a
TextField.StyleSheet object and
> then
> assign it to the TextField. There are examples in the
Help documents.
>
>
>
>
> "Dirk" <[email protected]> wrote in
message
> news:[email protected]...
> Yes I want to use css for this.
> I have an xml doc being pulled into my flash. Text is
fine except wherever
> I
> try to assign a style. It's also defaulting to the black
color in flash (I
> couldn't find a way not to select a color or style in
flash for the font)
> instead of the blue specified in the css doc. In that
first
> image/description, it cuts off at the <em> tag.
> Please help me understand what I'm doing wrong.
>
>
> XML doc:
> <?xml version="1.0" encoding="utf-8"
standalone="yes"?>
> <?xml-stylesheet type="text/css"
href="xmlstyles.css"?>
> <!DOCTYPE images [
> <!ELEMENT images (#PCDATA)*>
> <!ELEMENT pic (image, thumbnails, caption, desc)>
> <!ELEMENT image (#PCDATA)*>
> <!ELEMENT thumbnails (#PCDATA)*>
> <!ELEMENT caption (#PCDATA)*>
> <!ELEMENT desc (#PCDATA)*>
> ]>
> <images>
> <pic>
> <image>images/0.jpg</image>
>
<thumbnails>images/thumbs/wickham.swf</thumbnails>
> <caption>An Inspired Beginning</caption>
> <desc>Edward Virginius Valentine was born in
Richmond in 1838. A visit to
> the 1853 New York World's Fair with his father inspired
him to become an
> artist. Valentine studied in Paris and Italy from 1859
to 1861. He was
> granted permission to study under Berlin sculptor August
Kiss, <em>who had
> created the piece that first ignited Valentine's
artistic inspiration,
> Amazon Attacked by a Tiger.</em> In the spring of
1865, the deaths of both
> Kiss and his father, Mann Valentine, led him to return
to his home in
> Richmond, Virginia.
> </desc>
> </pic>
> etc., etc., ...
>
> CSS doc: (xmlstyles.css)
> em {
> font-style: italic;
> }
> para {
> font-size: 12px;
> }
> desc {
> font-size: 12px;
> color: #0000CC;
> }
>
>

CSS help? Adding a heading banner, how?

Hi folks, I was wondering if anyone here on this forum would both have the skill, the time and the kindness to offer help with a CSS tweak? I am using the LR HTML standard output. I want to place in a heading image I already use on my site. I was trying changes in the CSS files that LR gernerated last night. Took a copy of my sites CSS off the site and was doing my best to compare, trial and error tests.
I Was able to see how to change cell background colors and even page background colors. Of course I can figure out eventually how to shift from LRs 3 column minimum to my own 2 column design - or not fight that battle at all. But I am not sure how to tell the LR CSS to put the same image as heading background in the LR web page, as I have in my own.
Can anyone who actually knows how to do this, do this for me? I ask only to get a start. IF you generate a 3 x 3 table and then edit your content/custom.css page, that should be where you find the data to change. That is where I have been testing and it seems to work there.
But what I wold appreciate would be to see an example of just replacing ... However far you have to go down from the top to replace ... With a banner of some kind placed so that your banner would be background at the top of the page when done. If I had that I could see how it works and substitute my sites current header background.
The spacing on my pages come down just past the top line where the menus cross the page, about an inch. The best of all worlds would be to take out everything above where the LR output table starts and put in my own site title and banner. But I am really not good at tweaks in CSS yet. So a starting reference point would be sooo helpful. You know, When you are not sure what section to rip apart and what damage you are doing to some other place that needed that bit of coding?
ANyway, thanks very much if anyone can help. Appreciate it.
Levelbest

Not sure why your posts are coming in multiple lots - your last message came in three times.
Onto your colour problem. this is a personal opinion of course, but currently, the burgandy text behind the green in your header is very difficult to read. The added white dropshadow doesn't enhance the text, only makes it hard to read.
I would possibly make the header box white so that your logo and tagline stand out a lot more than they do. I would use the green/burgandy combination only as accents in your layout. Maybe a burgandy navigation bar, and use a solid green for the footer with which text. I would likely thrown in some blue or grey, both mix well with burgandy :-)
You may get more ideas for colourschemes from this site: http://www.colourlovers.com/palettes/top
Nadia
Adobe® Community Expert : Dreamweaver
Unique CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
Book: Ultimate CSS Reference
http://www.sitepoint.com/launch/005dfd4/3/133
http://twitter.com/nadiap

Servlet and CSS help!!

Hi everyone!
This may be the simpliest thing to most of you but I'm just wondering if anyone can give me a little help on how i can call and use a CSS in a servlet...
Here's what i tried:
out.println("<link rel=\"alternate stylesheet\" href=\"someCSS.css\" type=\"text/css\" title = \"someCSS\">");
I have also tried putting the .css files inside different directories
Web\WEB-INF\classes\someCSS.css
or
Web\WEB-INF\someCSS.css
or even
Web\someCSS.css
I really don't know what's wrong, I did try searching through the forums but it's not leading me anywhere, one suggested to use request.getContextPath() + \"/myStyle.css\" but i tried a couple of different ways to implement it(having it by itself, having it inside the out.println("") things...) but it just gives errors to that line..... if i'm doing it in a completely wrong way can anyone point me in the right direction??
Anyone who can help would be greatly appreciated :)
Tomato

I just put the CSS file in the web application directory (this one: Web\someCSS.css) and my HTML simply says <link ... href="someCSS.css">. Works just fine. Of course if your servlet isn't in a web application but has a customized mapping, then I have no idea.

Float Drop CSS help needed, i'm loosing my mind.

here is an example ...
http://www.wiatrc.org/wiatrc/vendor/test.html
i know my code is a mess, i've searched the board, but have
succeeded in confusing myself even more.
i did the 'float left' and even took out one of my columns to
try to make it fit.
it seemed to work over here
http://www.wiatrc.org/wiatrc/vendors.html
any help would be appreciated.
dave h

try messing with the padding and or margins setting them to
zero in your CSS. I tmight be helpful to post your html and css
code to get help more easily. There are lots of issues with
relapsing margins, default padding differences between browsers .
and some buggy stuff within IE.
Take a look at this page, there are some good posts on best
practices for preventing padding/ margin issues
CSS Margin and Padding
issues across browsers

Urgent CSS Help Needed

Hi guys, I need some serious help, I am making a website for
University and am struggling to center the website so that it stays
centered on different resolutions and when the window is made
smaller. My lecturer gave me the code which is apparently this -
body {
margin:50px 0px; padding:0px;
text-align:center;
#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
but I have no idea what to do with this stuff in order to
correctly implement it, the attached code is an example of one of
the pages I want centering, could someone either give me a step by
step walkthrough of what to do? or could they show me directly
where the code goes in the attached stuff.
Thanks in advance

try this:
<!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 http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Simons Self Portrait Bio</title>
<style type="text/css">

</style>
</head>
<body>
<div id="Content">
<div id="apDiv1"><img src="Images/xboxbio.jpg"
width="700" height="500" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect"
coords="12,456,122,492" href="xbox.html" />
</map></div>
<div id="apDiv2">
<iframe src="bioframe.html"
width="383" height="200"
align="right" marginheight="0" marginwidth="0">
</iframe>
</div>
</div>
</body>
</html>

Need css help please!

I'm having a problem in IE 7 & maybe 8 with my website. Here is the link to the staging site:
http://www.checkmandesign.com/staging/
In IE 7 the main content div seems to be pushed down from where it is supposed to be. I am on a Mac and it looks fine in Firefox & Safari. I can't view it on a PC so I am going by what I am being told by friends and also what I see on browser shots. I am new to coding so perhaps my css is messy and causing this. Can anyone help? I am also having another issue with a jquery script in my portfolio pages. The gallery is not loading properly in IE 7&8. It's a known issue which some people have written fixes in the forums (http://blog.ilexius.de/blog-post/2010/09/27/javascript-galleria-and-ie6-7-and-8-compatibil ity/)
I am pasting my CSS below in case anyone can see something that I am missing regarding the content issue:
body, h1, h2, p, ul, li {
margin: 0px;
padding: 0px;
font: normal 12px/28px Arial, Helvetica, sans-serif;
color: #7d7c7c;
text-align: left;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
#content h1 {
font-size: 14px;
font-weight: bold;
color: #FD1D13;
display: block;
padding-bottom: 10px;
#content h2 {
font-size: 14px;
line-height: 28px;
color: #7d7c7c;
font-weight: bold;
#content p {
font-size: 12px;
line-height: 16px;
color: #7d7c7c;
display: block;
margin-top: 0px;
margin-bottom: 16px;
#outerWrapper {
width: 980px;
margin: 0px;
#header {
height: 136px;
float: none;
clear: none;
#nav_bar {
height: 108px;
top: 172px;
padding-left: 110px;
padding-top: 10px;
padding-right: 40px;
#content {
width: 460px;
left: 280px;
padding-left: 290px;
background: #ffffff;
text-align: left;
margin-top: 1px;
padding-top: 62px;
#footer {
height: 70px;
padding-top: 60px;
padding-left: 100px;
clear: both;
font-family: Arial, Helvetica, sans-serif;
#footer p {
font-size: 10px;
line-height: 18px;
color: #7d7c7c;
text-align: center;
#footer p .footerLinks .footerLinks {
color: #7d7c7c;
text-decoration: underline;
#sidebar-left {
width: 140px;
padding-left: 130px;
float: left;
padding-top: 62px;
font-size: 13px;
#sidebar-right {
float: right;
width: 151px;
padding-left: 40px;
position: absolute;
top: 150px;
left: 751px;
height: 400px;
#mailingList {
font-size: 12px;
font-weight: bold;
color: #FD1D13;
#form1 {
padding-top: 20px;
.navbar-icon {
border-right: 1px solid #999;
padding-right: 5px;
margin: 0px;
z-index: 10;
#nav-bartext {
position: absolute;
z-index: 200;
#thumbnails {
height: 471px;
.clientList {
list-style: disc inside;
line-height: 16px;
font-size: 12px;
.footerLinks {
font-size: 10px;
color: #7d7c7c;
font-weight: normal;
#sidebar-left {
font-size: 14px;
line-height: 28px;
color: #1B0499;
#sidebar-right p img {
padding-bottom: 10px;

You can't have it both ways. You can either float a container or you can position it. I prefer to float columns.
#sidebar-right {
    float: right;
    width: 151px;
    padding-left: 40px;
/**REMOVE ALL OF THIS**/
    position: absolute;
    top: 150px;
    left: 751px;
    height: 400px;
Learn CSS positioning in 10 Steps -
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Review Floats and Clearings -
http://css.maxdesign.com.au/floatutorial/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Need CSS help

I'm relatively new to CSS and stumbling around. Can someone look at this page and tell me how to get the "more" boxes lined up in the top four white boxes?
http://www.fbcwentzville.com/new_site_2010/index_new.html
Would I use a relative position and how would I go about doing that? Also, when you make changes to the css sheet within Dreamweaver, do changes take place immediately? I tried playing around with relative position and didn't see any changes to it.
Thanks!

Hey Malaperty. Let me help you out and at least fix the issue at hand. Rather easy fix, but it will take a little pixel playing on your end to fine tune where you want your "more" buttons precisely.
First add postition:relative; to your .subdiv2 in the css. so the final code will look like this:
.subdiv2{
                position:relative;
                width:225px;
                float:left;
                margin:0 12px 0 0;
                background:url(../images/sub_div_bg.gif) repeat-y 0 0 #D6D7A0;
                color:#000;
                height: 350px;
                padding: 0;
Next, eliminate the margins from .subdiv2 p.more in your css and add the below code.
.subdiv2 p.more{
                position:absolute;
                bottom:20px;
                right:20px;
I added 20px to the bottom and right properties but this is where you need to play with it to fine tune the placement. bottom:20px means it will be 20px from the bottom of the .subdiv2 div and right:20px means it will be 20px from the right side of the subdiv2 element.
I won't get into explaining why all this works as you have some links to learn all this.
As far as absolute positioning being a bad layout strategy...well that can't be any more wrong. It is only bad if it is misused and then things can get ugly. Use it right and it can make form some of the best web effects that you can imagine. Learn and love it, but always use it wisely.
Check this link out http://csszengarden.com/ here you will find they use absolute positioning all over the sample sites...truly thinking outside the box. So absolute positioning is not to fear!

Need CSS help Coda-Slider 2

I'm having trouble setting the width of the <ul> in this Coda-Slider tab set up. I'd like all the tabs across the top to display in one line rather that wrap to two.
http://www.cidigitalmedia.com/coda-slider-2.0/index.html
You'll see the last tab wraps below.
Looked over the CSS and .js and could not find anything setting the <ul> to 552...
But IE Developer Tools toolbar and Firebug show an inline style of 552px...
I just can't find where that is.
CSS file:
http://www.cidigitalmedia.com/coda-slider-2.0/stylesheets/coda-slider-2.0.css
Would greatly appreciate some help.
Best wishes,
Adninjastrator

Thanks for your reply!
Turns out that the <ul> width was a math computation in the .js file (there was no <ul> width coded in the CSS or HTML).
A helpful soul over at:
http://stackoverflow.com/
helped me ID that line in the .js file.
ul.css({ width: 'auto', marginLeft: -18 });
I still had to use a neg margin to move the tabs all to the left... but all is working now.
http://www.cidigitalmedia.com/coda-slider-2.0/index.html
Best wishes,
Adninjastrator

Advanced CSS Help!

I'm using Dreamweaver CS5.5 as part of the CS5.5 master collection.
On my website I currently have a single style sheet (named style.css) and it contains 7 styles (.background, .networking, .header, .footer, .main, .mainround, .instruction).
Each page is constructed as follows:
.background is applied
.networking is applied to a table at the very top
.header is applied to a table below the .networking table
.main, .mainround, and/or .instruction is applied to table(s) within the body of the website
.footer is applied to the lowest table
The following is the same on EVERY single page of my site.
The .background style is applied to every page (consists of background-image, background-scroll: scroll; and background-repeat: no-repeat)
The .networking table will be including links/scripts to share my site on social networking websites.
The .header table includes my site logo as well 5 rollover images/links.
The .footer table inludes to rollover images/links.
What I want to do:
I want my "main" style to include all the information of the 4 aformentioned styles in one. For instance, say I name the style (within my style.css file) .background. When I apply .background to my site's body, at want that page to now have my background image and settings, the networking table with functioning links, the header table with my logo and rollovers and the footer tables with my rollovers. Though is nothing is contained in tables and are contained in something else, that is fine, as long as it is eficient and I get the desired style / effect!
Currently everything is centered on the page with auto left and right margins, the appropriate top margin to keep everything in order and properly spaced, and no bottom margin. I would need these settings/styles to remain, and I would need to be able to insert my site's content between the header and footer tables. If I need to exclude the footer table, I understand, but I feel everything else I want to do should be quite possible.
Thank you for your help fellow forum users. You have been an amazing help so far and I look forward to the day where I can actually answer someone else's questions!

Thank you for responding Murray. This site is not yet live (a temporary page is currently up), so I will post the code for a page here, though it doesn't contain much info, it has all of my tables with the appropriate styles applied to them.
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body class="background" onload="MM_preloadImages('buttons/Home/home-over.png','buttons/Schedule/schedule-over.png ','buttons/Register/register-over.png','buttons/Donate/donate-over.png','buttons/Supporter s/supporters-over.png','buttons/Legal/legal-over.png','buttons/Contact/contact-over.png')" >
<table width="800" border="0" cellpadding="0" cellspacing="0" class="networking">
<tr>
    <th scope="col"> </th>
    <th scope="col"> </th>
</tr>
</table>
<table width="800" border="0" cellpadding="0" cellspacing="0" class="header">
<tr>
    <th width="301" align="left" valign="middle" scope="col"><img src="images/logo.png" alt="Leapfest 30" width="301" height="120" /></th>
    <th width="499" align="right" valign="bottom" scope="col"><a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','buttons/Home/home-over.png',1)"><img src="buttons/Home/home.png" name="home" width="70" height="18" border="0" id="home" /></a><a href="schedule.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('schedule','','buttons/Schedule/schedule-over.png',1)"><img src="buttons/Schedule/schedule.png" name="schedule" width="96" height="18" border="0" id="schedule" /></a><a href="register.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('register','','buttons/Register/register-over.png',1)"><img src="buttons/Register/register.png" name="register" width="88" height="18" border="0" id="register" /></a><a href="donate.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('donate','','buttons/Donate/donate-over.png',1)"><img src="buttons/Donate/donate.png" name="donate" width="80" height="18" border="0" id="donate" /></a><a href="supporters.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('supporters','','buttons/Supporters/supporters-over.png',1)"><i mg src="buttons/Supporters/supporters.png" name="supporters" width="114" height="18" border="0" id="supporters" /></a></th>
</tr>
</table>
<table width="800" border="0" cellpadding="0" cellspacing="0" class="instruction">
<tr>
    <th scope="col"> </th>
</tr>
</table>
<table width="800" border="0" cellpadding="2" cellspacing="2" class="main">
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
</table>
<table width="800" border="0" cellpadding="2" cellspacing="2" class="footer">
<tr>
    <td align="right" valign="middle"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('legal','','buttons/Legal/legal-over.png',1)"><img src="buttons/Legal/legal.png" name="legal" width="65" height="18" border="0" id="legal" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','buttons/Contact/contact-over.png',1)"><img src="buttons/Contact/contact.png" name="contact" width="82" height="18" border="0" id="contact" /></a></td>
</tr>
</table>
</body>
</html>

Css help - ie7

Similar Messages

Maybe you are looking for