Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Safari center with relative positioning.

Posted on 2006-11-15
4
Medium Priority
?
691 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:Mark Steggles
Mark Steggles earned 1000 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 1000 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

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month11 days, 19 hours left to enroll

564 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