Solved

Safari center with relative positioning.

Posted on 2006-11-15
4
686 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Wordpress themes CSS? 6 41
CSS Won't Show Up On Drupal Omega Sub-Theme 1 36
html5 1 45
drop down menu blocks search boxes 4 23
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…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

751 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