Solved

Safari center with relative positioning.

Posted on 2006-11-15
4
687 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

630 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