Solved

Safari center with relative positioning.

Posted on 2006-11-15
4
682 Views
Last Modified: 2008-02-26
Hello all

I have a DIV which contains another DIV and then under that, I have a table with a red border.

<div class="middle" > *this contains both below
<div class="topBanner">Now tell us about your experience</div> *this has a white background to blend with the page
<table class="redTable"><tr><td> *this has a red border to be overlapped with the div above

The objective is to have the class="topBanner" with a white background interupt the big red border on the table under it.

This gives the effect that the line around the content stops at the top where the header is.

My styles are below

.middle
      {
      margin-left: 50px;
      text-align: center;
      }

.topBanner
      {
      background-color:White;
      position:absolute;
      top: 120px;
      padding: 0 10px 0 10px;
      height: 20px;
      margin-left: 15px;
      font-size: 13px;
      font-weight: bolder;
      color: #cc3333;
      }
.redTable
               {
      border-color:#cc3333;
      border-style:solid;
      border-width:8px;
      width: 700px;
                text-align: left;
                vertical-align:middle;    
                padding: 30px;
                }

It works fine in IE and Firefox but not in Safari.

As soon as I position relative or absolute (to get the div to "overlap" the table), it removes the center align in the "middle" div.

Thanks
Don

0
Comment
Question by:donaldcroswell
  • 2
4 Comments
 
LVL 6

Expert Comment

by:aescnt
ID: 17953938
what are you trying to center? the .redTable? I'm not sure if i understood it correctly. Try giving .redTable "margin: 0 auto;"
0
 
LVL 30

Assisted Solution

by:Steggs
Steggs earned 250 total points
ID: 17955001
Greetings,

If I have understood correctly you do not need to use positioning to achieve your desired layout. Are you just trying to have the .redTable with no top border??? If so, you could do this

.redTable
               {
     border-color:#cc3333;
     border-style:solid;
     border-width:8px;
     border-top:none;    <---------------
     width: 700px;
                text-align: left;
                vertical-align:middle;    
                padding: 30px;
                }

If this is not what you were after, please reply and I can make your other layout work for you

Regards
0
 

Author Comment

by:donaldcroswell
ID: 17960620
Sorry, to clarify I am trying to get the "topBanner" to center on the top border of the table.

So instead of not having a top border, there is one but it is overlapped by the topbanner. Thats why I'm using the positioning.

This makes the border go up and to the right on the left side, and up and to the left on the right side, but they don't meet because the top banner interupts them.

Hope that makes it more clear.
0
 
LVL 6

Accepted Solution

by:
aescnt earned 250 total points
ID: 17962589
This works for me.
I moved the "width: 700px;" from the table to the .middle.
I wrapped the text in .topBanner in <span>, which is positioned center of .topBanner.
.topBanner is positioned absolute to .middle (because .middle now has position: relative) to it's top:0 left:0.

<html>
<head>
<style type="text/css">
.middle {
     margin-left: 50px;
     text-align: center;
     position: relative;
     width: 700px;
}

.topBanner {
     text-align: center; width: 100%;
     position:absolute;
     top: -5px; left: 0;
}
.topBanner span {
     padding: 0 10px 0 10px;
     background: #fff;
     font-size: 13px;
     font-weight: bolder;
     color: #cc3333;
}
.redTable {
     border: solid 8px #cc3333;
     width: 100%;
     text-align: left;
     vertical-align:middle;    
     padding: 30px;
}
</style>
</head>
<body>

<div class="middle">
   <div class="topBanner"><span>Now tell us about your experience</span></div>
   <table class="redTable"><tr><td> *this has a red border to be overlapped with the div above</td></tr>
</div>

</body>
</html>
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now