Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Safari center with relative positioning.

Posted on 2006-11-15
4
Medium Priority
?
689 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: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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

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…
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 to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

730 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