I'm having a problem with Chrome rendering my page fine when loaded locally, but something goes wrong once the page is online. The first thing I did was check Safari, because they both share the same rendering engine. Safari renders my page fine.
Clicking on a link on the page and pressing the back button causes the page to load fine as well.
Here is an image showing how the page loads locally on Chrome:
And here the header is pushed down once the page is online:
Here is the relevant html:
<!-- header -->
<div id="header2">
<img src="images/detailpages/logo.png" alt="logo" />
<ul>
<li>Features</li>
<li>Pricing</li>
<li class="blue">Sign UpLog In</li>
<li><form><input type="text" name="form" placeholder="type another channel" id="navsearch" /><img src="images/detailpages/search.png" alt="search" /></form></li>
</ul>
</div>
<!-- end header -->
And CSS:
#header2 {
position: relative;
z-index: 999;
height: 40px;
width: 100%;
background: #000;
box-shadow: 0em 0em 0.5em #000;
-webkit-box-shadow: 0em 0em 0.5em #000; /* safari */
/* header nav type */
font-family: "Varela Round", Helvetica, Arial, sans-serif;
font-size: 15px;
}
#header2 ul {
float: right;
list-style-type: none;
}
#header2 li {
display: block;
float: left;
height: 32px;
margin: 10px 16px 0;
}
/* sign up/log in button */
#header2 li.blue {
background: url('../images/detailpages/login.png');
width: 170px;
height: 40px;
margin: 0;
}
#header2 li.blue a {
display: block;
float: left;
margin: 10px 3px 0 24px;
}
#header2 input {
height: 22px;
width: 220px;
padding: 0 8px;
font-family: "Varela Round", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333;
}
#header2 form img {
display: block;
float: right;
padding-left: 5px;
}
This guy had the same problem but it doesn't look like there was a solution:
CSS rendering in Chrome differs online from offline
My bet is you have (maybe accidentally) changed Chrome's Zoom settings for either your online or your offline domain.
Press Ctrl + 0 to reset the zoom level to find out.
Appears to be a font issue. Chances are you aren't getting "Varela Round" online and Helvetica will size differently than that font. Offline, you are sizing for Varela, online, you're getting Helvetica.
Related
I've been working on a basic website using just HTML and CSS. The files were saved to a network location and worked fine when previewed in different browsers. I'm doing this at work, so I wanted to take it home and work on it. I copied all the files to a memory stick, keeping the structure the same so that no file paths have changed, and even though it was exactly the same code, the style sheet suddenly wouldn't work properly.
Some of the style sheet works, like the text colours and the background image, so I know it's being seen, but the layout is messed up. I'm using the same browser so I don't understand why the styles work when opened from one location, but only half work when opened from another. As I said, I've checked the file paths and this isn't the problem.
Futhermore, I copied the files to a different location on my desktop from the original location and they messed up again, but in a different way. I copied the files from the memory stick back to the network and it was again messed up.
These are exactly the same files, so I don't understand why sometimes it's working fine and other times it's not. If anyone can offer some insight that would be great!
body {
font-family: Tahoma, Geneva, sans-serif;
background-color: #404040;
background-image: url("Pictures/background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
color: #ffffff;
padding: 5px;
}
#main {
width: 75%;
margin: auto;
}
header{
width: 100%;
background-color: #404040;
opacity: 0.9;
filter: alpha(opacity=90);
padding-top: 5px;
}
#logo {
width: 300px;
padding: 5px;
border: none;
}
#title {
text-align: center;
border-top: solid 7px #DDD;
border-bottom: solid 7px #DDD;
line-height: 0.5;
padding-bottom: 20px;
}
#title h1 {
font-size: 4.68em;
font-weight: normal;
}
#title p {
color: rgb(63,174,42);
font-size: 1.37em;
}
nav {
width: 100%;
overflow: auto;
background-color: #404040;
opacity: 0.9;
filter: alpha(opacity=90);
border-bottom: 2px solid white;
}
#menu {
list-style-type: none;
margin: 0;
padding-top: 15px;
padding-bottom: 15px;
float: right;
}
.menubutton {
display: inline;
padding-top: 15px;
padding-bottom: 15px;
border-left: 5px solid #404040;
border-right: 5px solid #404040;
}
.menubutton a {
color: white;
padding: 15px;
text-decoration: none;
font-weight: bold;
}
.menubutton:hover {
background-color: rgb(133,15,102);
}
.menubutton a:hover {
color: white;
}
#current {
display: inline;
padding-top: 15px;
padding-bottom: 15px;
border-left: 5px solid rgb(133,15,102);
border-right: 5px solid rgb(133,15,102);
}
#current a {
color: white;
padding: 15px;
text-decoration: none;
font-weight: bold;
}
#current:hover {
background-color: rgb(133,15,102);
}
#current a:hover {
color: white;
}
section {
width: 100%;
background-color: #404040;
opacity: 0.9;
filter: alpha(opacity=90);
padding-bottom: 5px;
}
aside {
width: 25%;
float: left;
padding: 10px;
}
.sidebarpost {
width: 90%;
margin: auto;
border: 2px solid rgb(133,15,102);
border-radius: 5%;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 10px;
}
article {
width: 65%;
float: right;
margin-right: 35px;
}
article h1, h2, h3, h4, h5, h6 {
color: rgb(63,174,42);
font-weight: normal;
}
h1 {
font-size: 2em;
padding-top: 10px;
text-align: center;
}
h3 {
font-style: italic;
font-size: 23px;
}
h4 {
font-size: 18px;
}
.post {
padding: 10px;
border-bottom: 2px solid;
border-color: rgb(133,15,102);
}
#lastpost {
padding: 10px;
}
#marathon {
width: 65%;
display: block;
margin: auto;
text-align: center;
}
a {
color: white;
}
a:hover {
color: rgb(133,15,102);
}
.date {
font-style: italic;
font-size: 12.5px;
}
table {
padding: 5px;
}
tr {
padding: 10px;
}
td {
padding: 10px;
}
section:after {
content: "";
display: table;
clear: both;
}
#media (max-width: 600px) {
aside, article {
width: 100%;
height: auto;
}
}
footer {
width: 100%;
border-top: 2px solid white;
padding-top: 25px;
padding-bottom: 25px;
background-color: #404040;
opacity: 0.9;
filter: alpha(opacity=90);
}
footer p {
text-align: center;
color: rgb(63,174,42);
}
<!DOCTYPE HTML>
<html>
<head>
<title>CCL HOMEPAGE</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="main">
<header>
<img src="Pictures/Logo.png" id="logo"></ br>
<div id="title">
<h1>One Step Ahead</h1>
<p>Digital Forensics, Data Analytics and Cyber Security</p>
</div><!--title-->
</header>
<nav>
<ul id="menu">
<li id="current">Home</li>
<li class="menubutton">News</li>
<li class="menubutton">SOPs, Policies and Forms</li>
<li class="menubutton">Official Drive</li>
<li class="menubutton">FocalPoint</li>
<li class="menubutton">HR</li>
</ul><!--menu-->
</nav>
<section>
<aside>
<div class="sidebarpost">
<h3>Latest News</h3>
<h4>NEW INTRANET LAUNCHED</h4>
<p class="date">July 2nd, 2018</p>
<p>2018 sees the redesign of our intranet. Take a look around and let us know what you think.</p>
</div><!--sidebarpost-->
<div class="sidebarpost">
<h4>Useful Links</h4>
<ul>
<li>Contracted Clients</li>
<li>Sales Clients</li>
<li>Focal Point</li>
<li>Google</li>
</ul>
</div><!--sidebarpost-->
</aside>
<article>
<div class="post">
<h1>Homepage Launch</h1>
<p>Welcome to CCL's Homepage. The homepage will be updated with Company news and have pages that aid with access to the most up to date SOP's, policies, procedures and documentation for the business.</p>
</div><!--post-->
<div class="post">
<h2>Dragon Boat Racing</h2>
<p class="date">July 2nd, 2018</p>
<p>There are a limited number of spaces left on this year's Dragon Boat Racing team! The event takes place on 16th September. If you're interested in joining, please email . Click here for more information about the day.</p>
<p>There's also a home made cake up for grabs for the person who comes up with the best team name!</p>
<p>The team so far is:
<ul>
<li></li>
</ul>
</p>
</div><!--post-->
<div class="post">
<h2>Blog Posts</h2>
<p>‘Defence Cases’ written by Jason Dickson</p>
<p>‘The New Nokia 3310: Part 1’ written by Arun Prasannan</p>
</div><!--post-->
<div id="lastpost">
<h2></h2>
<p></p>
</div><!--lastpost-->
</article>
</section>
<footer>
<p>For any updates or additions, please email </p>
</footer>
</div><!--main-->
</body>
</html>
Update: just seen this is only a problem in IE11, unfortunately this is the browser it needs to run on.
Update: When I open the developer tool in IE11, it shows the html is not being loaded correctly. I've got a screenshot to show the difference between the code in the console and my source code. I think this is the issue, as the layout elements such as and are being closed before the actual content inside them, however as can be seen from the text document, this is not how I've programmed it. Any ideas why it would be doing this?
Turns out it was the compatibility mode settings. Not sure why these were on in one tab but not in another, but it's working now.
I am trying to float my logo to the left in the header but it doesn't float to left at all. I would really appreciate if someone could point our my error since I am new to CSS.
This is my website if you would like to see my problem live: http://cashski.com/
Here is my HTML code:
<div id="navigation">
<div class="center_navigation">
Contact
Instagram Followers
Instagram Photo Likes
<img src="img/logo.png" />
</div>
</div>
Here is my CSS code:
body {
padding: 0px;
margin: 0px;
font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
}
#navigation{
width: 100%;
height: 50px;
margin: 0px auto;
position: relative;
background-color: #2d5b89;
border-bottom: 1px solid #244a75;
}
.center_navigation {
width: 960px;
height: 50px;
margin:0px auto;
font-size: 16px;
}
.center_navigation a {
padding: 10px 0 10px 30px;
float: right;
margin-top: 4px;
color: #babcc5;
text-decoration: none;
}
.center_navigation a:hover {
color: white;
}
.center_navigation a img {
float: left;
}
The problem is your all anchor tags are float:right and your image is inside a anchor tag, so making img float:left doesn't change much.
So you either need to put the style on the container of image ie. anchor tag like this
<a href="index.php" style="float: left;">
<img src="img/logo.png">
</a>
or if your image is always in last anchor tag then you can also use this
.center_navigation a:last-child{
float: left;
}
Js Fiddle Demo
I am implementing a very simple css menu. However, if I select a menu title in the menu bar (and thus open the menu associated with it) the width of the title extends to the width of the menu, which is not desired (i.e. the width of the title should not change). Check out the JSFiddle, or have a look at the markup:
<div id="menu">
<ul>
<li>you
<ul>
<li>register...</li>
<li>login...</li>
<li>forgot password...</li>
</ul>
</li>
<li>.</li>
<li>qan</li>
<li>.</li>
<li style="width: 20px"><a class="site">be</a>
<ul>
<li>be</li>
<li>do</li>
</ul>
</li>
</ul>
</div>
and the css definitions:
#menu {
font-family: Arial, Helvetica, sans-serif;
padding: 0px 5px;
font-size: 12px;
line-height: 18px;
color: darkgrey;
position: absolute;
top: 0px;
left: 0px;
height: 20px;
background-color: black;
z-index: 3;
/*opacity: 0;*/
white-space: nowrap;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
}
#menu>ul>li {
font-weight: bold;
display: inline-block;
float: left;
padding: 2px 1px 0px 1px;
width: auto;
/*width: 10px;*/
}
#menu a { color: inherit; text-decoration: none;}
#menu>ul>li>a:hover { background-color: grey;}
#menu>ul ul {
display: none;
background-color: lightgrey;
padding: 2px 5px;
line-height: 14px;
min-width: 100px;
}
#menu>ul ul>li {
color: black;
padding: 2px 8px 2px 5px;
margin: 0px -3px;
}
#menu>ul ul>li:hover { color: lightgrey; background-color: grey;}
#menu>ul>li:hover ul { display: block;}
Since the menus are generated dynamically and contents meant to change on the fly and the font used is proportional, I cannot just set the widths of a title to a constant value which suppresses the resize. The width of the title should be determinded solely by the width of the text.
It used to work when I had implemented yuimenus, but that did all kinds of stuff to my CSS, the ramifications of which I found hard to control, so now I cooked up the menu by myself and am quite happy with it, save for the width change, and I haven't figured out which part of yui suppressed that. Any suggestions?
I don't agree with max-width.. this will make the link's width content-independent
use position:absolute; for the submenu: jsFiddle
Set width in li
Your updated example :- http://jsfiddle.net/8U5An/8/
Css:-
#menu ul li {
width: 25px;
}
See some useful example as well , how they handle same case by using width only :-
http://www.diy.com/diy/jsp/index.jsp?noCookies=false
http://www.puregrips.com/
Display="Position: Relative;" is Juggling in IE (Browser Mode: IE7/8/9 - Document Mode: Quirks) But If I changed Document Mode from Quirks to IE7/8 or even 9 it's working fine. How to set through CSS this issue? Please see sample code below:
CSS
.aFlyOut{
padding: 10px;
bottom: 0px;
border: 1px solid #a6adb3;
background-color: #FFFFFF;
position: relative;
z-index: 9999;
}
.aFlyoutCollapse
{
background-image: url("/vtpOnline/images/settings.png");
background-repeat: no-repeat;
background-position: 100% 50%;
cursor:pointer;
width:40px;
height: 20px;
text-indent: 21px;
color: #FFFFFF;
}
.aFlyoutExpand
{
background-image: url("/vtpOnline/images/settings.png");
background-repeat: no-repeat;
background-position: 100% 50%;
cursor:pointer;
width:40px;
height: 20px;
text-indent: 21px;
color: #FFFFFF;
}
.aFlyoutButton{
height: 12px;
float: right;
width: 38px;
cursor: hand;
padding-right: 4px;
}
.aFlyout{
float: right;
background-color: #FFFFFF;
border:1px solid #a5acb2;
right: 6px;
#right: 8px;
padding: 0px;
}
.aFlyoutHeader{
padding: 4px 6px 3px 0;
background: url("/vtpOnline/images/actionFlyoutHeaderIcon.gif") #090999 no-repeat;
color: #FFFFFF;
text-indent: 23px;
font-size: 11px;
font-weight: bold;
}
.aFlyoutLinkWrapper{
padding:5px;
}
.aFlyoutLinkWrapper a{
padding: 5px;
color: #010356;
font-size: 11px;
display: block;
text-decoration: none;
}
.aFlyoutLinkWrapper a:hover{
color: #0060ff;
background-color: #f2f2f2;
}
.aFlyoutRefreshLink{
background: url("/vtpOnline/images/addNote.png") no-repeat 0 50%;
text-indent: 12px;
#text-indent: 10px;
}
HTML
<div class="aFlyoutButton" id="aFlyoutLink">
<!-- Action Flyout Action Button -->
<div class="aFlyoutExpand" title="Actions" id="aFlyoutButton" onMouseOver="aFlyoutExpand()" onMouseOut="aFlyoutExpandCollapse()" onClick="aFlyoutExpandCollapse()"> </div>
<div id="aFlyout" class="aFlyout" style="display: block;" onMouseOver="aFlyoutExpand()" onMouseOut="aFlyoutExpandCollapse()">
<!-- Action Flyout Action Header -->
<div class="aFlyoutHeader" style="color: #FFFFFF;font-size: 11px !important;"> Actions </div>
<!-- Action Flyout Links Panel -->
<div class="aFlyoutLinkWrapper" style="width: 100px;"> <a class="aFlyoutRefreshLink" href="#" id="j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION" name="j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION" onClick="aFlyoutExpandCollapse();;A4J.AJAX.Submit('j_id_jsp_2094016106_0','j_id_jsp_2094016106_1',event,{'oncomplete':function(request,event,data){Richfaces.showModalPanel('AddNoteModalPanel');setValues();return false;},'similarityGroupingId':'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION','parameters':{'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION':'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION'} ,'actionUrl':'/vtpOnline/faces/order/edit/default.jsf'} );return false;">Notes</a> </div>
</div>
</div>
When i mouse hover it shows:
However, it should be as:
Document mode quirks means that you're essentially running a pre-IE6 rendering engine. A good solution to solve this is to add a doctype to the top of your HTML document. This will put the browser in standards mode by default, and will allow your position:relative; to work as expected.
The simplest doctype is the HTML5 one:
<!DOCTYPE html>
Put that on line 1 of your HTML. There is no way to force standards mode via CSS.
Thanks everyone, it has been resolved; please see following code reference. I've changed position from relative to absolute and set top & height to fix the positioning.
.aFlyOut{
position: absolute;
top: 28px;
height: 70px;
}
My apologies if this too basic of a question but CSS is boggling me. I think I'm doing something that CSS is supposed to do easily but it is simply not working the way I read the documentation.
Here's my example. It's been massively simplified but the basic problem remains. I'm sure this is some core misconception on my part, I just don't know where it lies.
Here's the goal:
Here's what I get now:
Here is the HTML:
<div id="line-wrapper">
<div id="block-nice-menus-1">
<ul id="nice-menu-1">
<li><span title="Departments" class="nolink">Departments</span>
</li>
</ul>
</div>
<div id="block-imageblock-40">
<img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
alt="" />
</div>
<div id="block-imageblock-42">
<img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
alt="" />
</div>
</div>
And here's the CSS:
/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
background-color: #ff0000;
}
#block-nice-menus-1 {
position: relative;
float: right;
margin-right: 0px;
height: 40px;
border: none;
background: #d6b982;
}
#nice-menu-1 {
display: block;
padding: 0px 30px;
border-top: none;
border-bottom: none;
color: #000;
background: #d6b982;
line-height: 2.4em;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform:uppercase;
text-decoration: none;
}
#nice-menu-1 ul, #nice-menu-1 li {
border-top: none;
border-bottom: none;
border-color: #e11837;
}
#block-imageblock-40 {
/* top-menu-swish */
float: right;
margin: 0px;
}
#block-imageblock-42 {
/* top-menu-leading-line */
bottom: 0px;
height:6px;
width:100%;
background: #d6b982;
}
I can't get the floats right (I know, Yet Another Float Question). The main issue is that this is going to be a menu with a variable number of items, so as the menu grows, ("Departments" now, but later "Departments", "Services", "Sections", etc.) it should push to the left, reducing the length of the line I can't use a fixed length on the leading line (#block-imageblock-42). Also, the menu items will have separators, so I can't just full-width things. This needs to be done in pure CSS, no jQuery or other JS.
Here's my JSfiddle of the problem: http://jsfiddle.net/zjfsy/
UPDATE: I have modified the question to be more specific per the requests of folks trying to help. The "goal" image at the top has been updated to more accurately reflect the issue. One thing I really want to make clear is that this specific instance is not so important. I already doctored up a position:absolute fix that will hold for the short term. My desire is to understand better why this is so hard. I have three containers. I want two of them to float right and the third to expand to fill the space from the last container to the edge of the page. It seems like this is what float was supposed to do. I assume this is some base misunderstanding on my part.
Anyway. Here's more constraints:
The leading bar needs to expand to fill the empty space between the
left side and the swish.
Each of the tabs needs to have a separator that allows the background through.
The number of the tabs is variable, based on client choices -- which
can change regularly.
I can't really change the structure of the HTML, other than
modifying it with CSS.
And again, all help is very much appreciated.
here is my solution: http://jsfiddle.net/abbood/b56Vq/ (never used jsfiddle before.. so sorry if i did this wrong, or if i was supposed to fork your project)
here is the code:
<html>
<head>
<link href="betterStyle.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<ul>
<li><div></div><div>Departments</div></li>
<li><div></div><div>Services</div></li>
<li><div></div><div>Sections</div></li>
<li><div></div><div>stuff</div></li>
</ul>
</div>
</body>
</html>
//betterStyle.css
#wrapper {
height: 2.5em;
background-color: #e0203b;
background-image: url('http://s11.postimage.org/a1jmymlgv/bage_Box.png');
background-position: bottom;
background-repeat: repeat-x;
}
ul
{
list-style-type: none;
float: right;
margin: 0;
padding: 0;
}
ul li {
float: right ;
display: inline-block;
}
/* text */
ul li div:nth-child(2) {
line-height: 2.5em;
line-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform: uppercase;
background-color: #d6b982;
float: right;
padding-right: 1em;
}
/* image */
ul li div:nth-child(1) {
background-image: url('http://s8.postimage.org/b2qycoatd/top_menu_swish.png');
background-position: left top;
background-repeat: no-repeat;
float: left;
width: 53px;
height: 40px;
line-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform: uppercase;
}
notes:
i created my own image and I linked to it using some image hosting service.
you can add as many tabs as you want (i assumed that each tab will have that image attached to it.. i wasn't sure how you wanted the final thing to look like (the right edges look too sharp).. but i'm sure you can adjust it to your liking.. when adding extra tabs the horizontal line shrinks.. i think that's what you meant when you said so as the menu grows, it should push to the left, reducing the length of the line
update:
Here is the updated answer without changing a line in the html: http://jsfiddle.net/abbood/SkxkC/ (for some reason there is a bump under the folder image in jsfiddle.. i tested it on mac chrome/safari/firefox and they worked fine.. lemme know if it isn't working perfectly for you though)
html (pretty much same.. just added a couple of tabs just for fun):
<body>
<div id="line-wrapper">
<div id="block-nice-menus-1">
<ul id="nice-menu-1">
<li><span title="Departments" class="nolink">Departments</span>
</li>
<li><span title="Departments" class="nolink">Services</span>
</li>
<li><span title="Departments" class="nolink">Classes</span>
</li>
</ul>
</div>
<div id="block-imageblock-40">
<img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
alt="" />
</div>
<div id="block-imageblock-42">
<img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
alt="" />
</div>
</div>
</body>
css:
/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
background-color: #ff0000; /* red */
height: 40px;
position: relative;
z-index: -2;
}
#line-wrapper div {
background-color: #ff0000; /* red */
}
#block-nice-menus-1 {
position: relative;
float: right;
margin-right: 0px;
height: 40px;
border: none;
background: #d6b982;
}
#nice-menu-1 {
display: block;
border-top: none;
border-bottom: none;
color: #000;
line-height: 2.4em;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform:uppercase;
text-decoration: none;
margin: 0;
padding: 0;
}
#nice-menu-1 ul {
padding: 0;
background-color: #ff0000; /* red */
}
#nice-menu-1 ul, #nice-menu-1 li {
border-top: none;
border-bottom: none;
border-color: #e11837;
}
#nice-menu-1 li{
list-style-type: none;
display: inline-block;
padding: 0 2em;
background: #d6b982; /* bage */
height: 40px;
}
#block-imageblock-40 {
/* top-menu-swish */
float: right;
margin: 0px;
}
#block-imageblock-42
{
/* top-menu-leading-line */
bottom: 0px;
height:6px;
width:100%;
background-color: #d6b982 !important;
position: absolute;
z-index: -1;
}
I a have also done something similar that does not use the position:relative feature for the #line-wrapper since that may cause you some problems when you implement it.
See http://jsfiddle.net/zjfsy/
#block-imageblock-42 {
/* top-menu-leading-line */
height:6px;
width:100%;
background: #d6b982;
position:absolute;
margin-top:34px;
}
#line-wrapper {
display: block;
height: 40px;
width: 100%;
background-color: #ff0000;
}
Hope this helps! (I am definitely going to vote wxactly's answer up since it is a better answer than mine since it doesn't require "hard coding" with magic number margins, etc. Definitely use his answer if you can, but now at least you have two different ways.