4 replies [Last post]
stargirl51
stargirl51's picture
Offline
newbie
Last seen: 14 years 18 weeks ago
Timezone: GMT-8
Joined: 2007-02-02
Posts: 6
Points: 0

I was assigned to create a default website and CSS for my work. Most of the tutorials and forums helped me out a lot and everything went smoothly until I tried to place text next to my container. When I tried to put in text, it ended up overlapping the container box instead of starting next to it. Naturally, I tried putting in a margin for it embedded in the HTML. It worked for mozilla but not IE. When I tried to transfer the margin property for said paragraph to the CSS, it's like the code doesn't exist!

Here's the CSS

/* CSS Document */

/* Page Basics */

div.main{
margin-left:160px;
}

/* The Cool Stuff */
#ddcolortabs{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}

#ddcolortabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

#ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}

#ddcolortabs a{
float:left;
color: white;
background: #7eb747 url(color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#ddcolortabs a span{
float:left;
display:block;
background: transparent url(color_tabs_right.gif) no-repeat right top;
padding:4px 9px 2px 6px;
}

#ddcolortabs a span{
float:none;
}

#ddcolortabs a:hover{
background-color: #51b906;
}

#ddcolortabs a:hover span{
background-color: #51b906;
}

#ddcolortabs #current a, #ddcolortabs #current span{ /*currently selected tab*/
background-color: #477eb6;
}

#ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #678b3f;
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

.breadcrumb{
font: bold 14px Arial, Verdana, sans-serif;
}

.breadcrumb a{
background: transparent url(breadcrumb.gif) no-repeat center right;
text-decoration: none;
padding-right: 18px; /*adjust bullet image padding*/
color: navy;
}

.breadcrumb a:visited, .breadcrumb a:active{
color: navy;
}

.breadcrumb a:hover{
text-decoration: underline;
}

#container {
padding: 0px 5px 0px 5px;
margin: 0px;
position: absolute;
top: 89px;
right: 0x;
width: 129px;
}

And here's the HTML:

Dummy Test Page 1

@import "color2.css";

 

Lessons of the Day
Coming up with an idea
Finding an article
Finding a journal
Boolean search
I'm testing to see if the texting will appear next to the container. That and I think my brain exploded.

Can anyone please help me? Or send a few pointers along my way?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 13 weeks 4 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

You'll have to be a bit more

You'll have to be a bit more specific and let us know which "bit" is overlapping.

Something to think about - different elements have default padding and margins, which differs between browsers.

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 33 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

If it were me, I would

If it were me, I would change the position:absolute on container (that particular piece of css shold be handled as carefully as if you had some nitroglycerin to move) to float:left

Works for me

stargirl51
stargirl51's picture
Offline
newbie
Last seen: 14 years 18 weeks ago
Timezone: GMT-8
Joined: 2007-02-02
Posts: 6
Points: 0

Clarifying

The container and main content text are overlapping. Would a screenshot help?

The different browsers, I really don't have a problem with. It's the fact that the text stars at the very left of the page that I've been having trouble with.

stargirl51
stargirl51's picture
Offline
newbie
Last seen: 14 years 18 weeks ago
Timezone: GMT-8
Joined: 2007-02-02
Posts: 6
Points: 0

It worked!

It worked! Thank you so much!!!!