<hr /> = Depreciated or something?

Get Started
1

<hr /> works fine on
Google Chrome
Mozilla Firefox

It’s weird on
IE
Opera

IE I got it to work by to have a line disappear, so the search box is fine, but opera loads it like ****. It hides half of the search box.

The main problem is I want 3 lines to divide my header correctly and have it look neat and clean, but this is causing it to look ugly especially in opera. Should I drop the hr tag completely?

Anyone have any other ideas? I don’t want to drop down the header any farther than it is because it would make chrome and firefox have a 30-50px white space that looks empty.

2

The tables do it correctly and take less time. The hr line is the problem. The tables do the 5px which I like. thanks though.

3

I am pleased that you manage to trace and nearly solve your problem.

I took a quick look at your page source and noticed that you combine tables and divs. I would be tempted to try and eliminate the tables one by one and use divs.

I think the additional 5px space is caused by the browsers having different defaults.

To reduce this problem I set the following in my CSS file and then add borders, margins and padding as and where required. Maybe give it a try when you have some free time :slight_smile:



  * {border:0; margin:0; padding:0}

.

4

Try this instead:


<p style='margin:0; border-top:double 4px #f00; width:55&#37;; height:4.2em'>
  <b>border-top; align left</b>
  <br />
  style='margin:0; border-top:double 4px #f00; width:55%; height:4.2em'
  <br />
</p>

<br />    
<p style='margin:0 auto; border-bottom:double 4px #f00; width:55%; height:4.2em'>
  <b>border-bottom;  align centre;</b> 
  <br />
  style='margin:0 auto; border-bottom:double 4px #f00; width:55%; height:4.2em '
</p>

<br />    
<p style='margin:0 0 0 auto; border-bottom:double 4px #f00; width:55%; height:4.2em'>
  <b>border-bottom; align right:</b>
  <br />
  style='margin:0 0 0 auto; border-bottom:double 4px #090; width:55%; height:4.2em'
</p>
<br />    
<br />

.

5

Thanks, I was also thinking if I could use CSS to make 2 lines one below the navigation

Navigation
CSS - 1px line
Header
content - first row
Your idea - 1px line
content - second row
CSS - 1px line

I should try your way then I’m going to look into css as an idea to figure out the codes that used for this.

Thanks.

6

Is it possible to see an online example of your current development?

.

7

http://www.fithope.com

Chrome / Opera would show you the problems.

I implemented a 1 px border north and south of the header. Which made the search bar show in opera completely, but now chrome has a ton of space to deal with.

I wonder if there’s a css variable that would force the header to show the bottom and the top pixel lines completely and then load everything in between, so it wouldn’t do this. Opera would just load with extra white space in the header.

Maybe
max height and set height to 100%? I’m not sure if that would screw it up or work though. I need to keep looking.

UPDATE
I got the 1px borders and I set the height to 100%. Do I need to set a max height with this implemented just in case it decides that the header is 100% of the entire page so the content would be like 50k pixels down or does this work fine nowadays? I’d set it to like 300px or something that would completely on the sites that load larger, but this would stop it from loading with 500px of space or the dreaded 50k (lol that’s insane, but just saying).

I’m not going to play with it anymore now. I think if it wants to load with a little extra space in ie and opera that’s fine. It’s only like 5px of space above and below the line which isn’t exactly as noticeable as the missing search box and the 30px of line. Better to just not touch it anymore. Thank you.