There is a problem with my code where tiny underscores appear on the bottom-right corner of my anchor image. I have no idea how to fix it. I've heard answerers form other similar questions saying you have to add a closing </a> tag at the end, but that doesn't seem to be the problem, as I already have those tags included in my code. I also don't remember adding underscores into my code on purpose, so I have no idea how it can be removed.
<!DOCTYPE html>
<html>
<head></head>
<body style="background-image: url(https://img.michaels.com/L6/3/IOGLO/852866719/201341423/10151236.jpg?fit=inside|1024:1024);">
<button onclick="executeCommand()" style="border: 0; background: 0;"><img src="https://image.flaticon.com/icons/svg/54/54527.svg" style="padding: 5px 0px 0px 0px; width: 40px; height: 40px;"></button><div id="search"></div>
<br>
<a href="https://www.google.ca/" target="_blank"><img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/Chrome__logo.max-2800x2800.png" alt="Google Chrome" style="width: 40px; height: 40px; padding: 0px 0px 5px 4px">
</a>
<br>
<a href="https://mail.google.com/" target="_blank"><img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/Gmail_logo.max-2800x2800.png" alt="Google Mail" style="width: 40px; height: 40px; padding: 5px 0px 5px 4px">
</a>
<br>
<a href="https://docs.google.com/" target="_blank"><img src="https://seeklogo.com/images/G/google-docs-logo-6A8CD4F30A-seeklogo.com.png" alt="Google Docs" style="width: 30px; height: 40px; padding: 5px 0px 5px 9px">
</a>
<br>
<a href="https://www.youtube.com/" target="_blank"><img src="https://lh3.googleusercontent.com/Ned_Tu_ge6GgJZ_lIO_5mieIEmjDpq9kfgD05wapmvzcInvT4qQMxhxq_hEazf8ZsqA=w300" alt="Youtube" style="width: 40px; height: 40px; padding: 5px 0px 5px 4px">
</a>
</body>
</html>
Add this CSS line
a{
text-decoration: none;
}
I had the same problem. this person, is the answer:
"Put the “a” tag directly after the “img” tag, i.e. get rid of the newline (which will be parsed as a space). – user3603486 Apr 1 '18 at 15:13"
see my example att: anchor underscores:
Related
So my body is set at 1140px, however, I'd like my footer to be stretched across the screen. I have messed with so many codes, yet, I can't seem to find out what the reason is.. I have done a lot of research online and most people seemed to recommend margin: 0; but that didn't seem to help either.
There's so many codes behind this, that it seems like something else is messing with it.
footer {
background-color: #333;
width: 100%;
height: 320px;
position: relative;
}
.footer-body {
background-color: #333;
width: 60%;
height: 320px;
margin-left: 22%;
padding: 10px 0px 10px 20px;
position: relative;
color: #FFF;
font-family: 'Raleway', sans-serif;
}
footer p {
line-height: 20px;
margin: 10px 10px 0px 0px;
}
.map-address {
margin-top: 21px;
margin-bottom: 30px;
}
.footer-links {
color: #FFF;
font-size: 12px;
}
.widgetarea {
width: 100%;
text-align: center;
}
<footer>
<!--<div class="row">-->
<!-- Info Widget Start -->
<div class="footer-body">
<div class="col-lg-3 clearfix custom1" style="margin-top: 15px;">
<span style="font-size: 32px; font-weight: bold; color: #FFF;">ThanksOffice</span><span style="font-size: 32px; font-weight: bold; color: #ebb621;">.com</span>
<p style="font-size: 13px; line-height: 18px; color: #FFF;">ThanksOffice is a new concept of office space-sharing. Through ThanksOffice, everybody can share their unused spaces with flexible time-based options and also make a profit for sharing ThanksOffice with others</p>
</div>
<!-- Maps Widget Start -->
<div class="col-lg-4 col-sm-6 clearfix responsive-big-margin custom2">
<div class="map-address">
<span style="font-weight: bold; color: #fff; font-size:20px;">Contact Information</span><br>
<p>
<span style="color: #ebb621; font-weight: bold; font-size: 13px;">AddR:</span> <span style="color: #FFF; font-size: 13px;">3235 Satellite Blvd Bldg 400 Suite 290, Duluth, GA 30096</span>
<span style="color: #ebb621; font-weight: bold; font-size: 13px;">Email:</span> <span style="color: #FFF; font-size: 13px;">support#thanksoffice.com</span><br /><br />
</p>
<a href="https://www.facebook.com/tmpospro/?view_public_for=152376381930187" target="_blank">
<img src="/images/icon_facebook_white.png" width="20" style="margin-right: 20px;"></a>
<a href="https://www.instagram.com/tmposthanks/" target="_blank">
<img src="/images/icon_instagram_white.png" width="20" style="margin-right: 20px;"></a>
<a href="https://twitter.com/TMPOSTHANKS" target="_blank">
<img src="/images/icon_twitter_white.png" width="20" style="margin-right: 20px;"></a>
<a href="https://www.pinterest.com/tmposthanks/" target="_blank">
<img src="/images/icon_pinterest_white.png" width="20" style="margin-right: 20px;"></a>
<a href="https://www.youtube.com/channel/UCJGBaNOR3Y_ngsH4YoM-weg/featured?view_as=public/" target="_blank">
<img src="/images/icon_youtube_white.png" width="20" style="margin-right: 20px;"></a>
</div>
</div>
<!--<div class="widgetarea">-->
<!--</div>-->
<!-- Maps Widget End -->
<center>
<p class="footer-links">
<a target="_blank" href="/pdf/TERMS_OF_USE.pdf" style="font-size: 12px;">Terms of Use</a> |
<a target="_blank" href="/pdf/TXO-Privacy_Policy_Ver_1.0.1.pdf" style="font-size: 12px;">Privacy Policy</a> |
<a target="_blank" href="/pdf/Anti-Spam_Policy.pdf" style="font-size: 12px;">Anti-Spam Policy</a> |
<a target="_blank" href="/pdf/Electronic_Signature_Consent.pdf" style="font-size: 12px;">Electronic Signature Consent</a> |
<a target="_blank" href="/pdf/VR_NOTICE_TO_REPORT_USERS.pdf" style="font-size: 12px;">FCRA Agreement</a> |
<a target="_blank" href="/pdf/ThanksOffice.com_FAQ_Ver1.2.pdf" style="font-size: 12px;">FAQ</a> |
</p>
<p><span style="color: #fff;">© <%=DateTime.Now.Year%> TMPOS Inc. All rights reserved. <br />Powered by ESolutionTG</span></p>
<!--</div>-->
</div>
</div>
Set footer {position: absolute}
It sets your footer out of the html elements flow and the width of the body doesn't effect it.
I'm not sure the exact effect you are trying to achieve, but maybe try adding width: 100%; text-align: center; and remove margin-left: 22% in .footer-body
It looks like you didn't close <center> tag:
<!-- Maps Widget End -->
<center>
I assume that "<%-- --%>" is part of your template engine, but I removed them (not the HTML tags inside) and tried it on codepen and it works.
Plus what Ercan Peker suggested if you have fixed <body> width.
Like others have suggested, you can use position property to take the footer element out of any contained parent.
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100vw; /* Make your footer span across the entire viewport */
}
I imagine this is a duplicate question, but as someone who is relatively inexperienced in HTML I don't know exactly what to search, and I couldn't find a direct answer from the google searches I tried.
I'm writing HTML for the sidebar for an older website. The sidebar is nothing fancy - a small image at the top, followed by a number of plaintext links listed below it, placed at the side of the webpage with a css styling. Each link takes this form:
<span class="c2">Subpage</span><br>
In an effort to make the document somewhat more readable, I've expanded the various links to the following:
<a href="/subpage/">
<span class="c2">Subpage</span>
</a>
<br>
However, when I do this, a few extra pixels of padding are placed above and below each link. Ultimately, the combined added padding causes the links to end up overlapping an element lower on the page, which I don't want.
I'm already aware that HTML converts a newline to a space, but this appears to be a distinctly different problem. I'm curious to know what causes this padding to appear, given that I have difficulty replicating it in the online HTML playground.
Below is a mockup of the sidebar's HTML and the parts of the CSS files I believe are relevant:
body{
margin: 1px 10px 10px 10px;
padding:1px 10px 10px 10px;
background-image: url(../../images/ribbon.jpg);
}
#lh-col{
position: absolute;
top: 1px;
left: 5px;
width: 110px;
margin: 1px;
padding: 1px;
}
#rh-col{
margin: 0px 21px 0px 100px;
padding: 20px;
}
span.c2 {color: #004080; font-family: Arial; font-size: 85%}
<body>
<div id="lh-col">
<p>
<a href="/">
<img src="images/logo.gif" border="0" alt="Text" width="33" height="22">
</a>
</p>
<p>
<a href="/page1/">
<span class="c2">Page 1</span>
</a>
<br>
<a href="/page2/">
<span class="c2">Page 2</span>
</a>
<br>
<a href="/page3/">
<span class="c2">Page 3</span>
</a>
<br>
</p>
</div>
<div id="rh-col">
<!-- The rest of the page... -->
</div>
</body>
Browsers are notorious for adding extra padding between inline elements, https://css-tricks.com/fighting-the-space-between-inline-block-elements/, when there is a line break or space between them in the HTML. There's several ways to circumvent this:
Use an HTML minifier, http://minifycode.com/html-minifier/. (or a workflow tool would be more efficient)
Rewrite your HTML to remove the spaces manually. The only necessary part to focus on is having no space between one element's closing tag and the next element's open tag. i.e. </a><a>
The flexbox solution mentioned in other answers.
Adjust your CSS to compensate for a scenario where two <a> are next to each other and negative margin the second one (do not recommend this but it is an option).
a + a{margin-left: -4px;}
Another solution is to add display block to your a tags
Also if I was coding this I wouldn't even include the p tag or the br tag. Unless you need them for some reason.
body {
margin: 1px 10px 10px 10px;
padding: 1px 10px 10px 10px;
background-image: url(../../images/ribbon.jpg);
}
#lh-col {
position: absolute;
top: 1px;
left: 5px;
width: 110px;
margin: 1px;
padding: 1px;
}
#rh-col {
margin: 0px 21px 0px 100px;
padding: 20px;
}
span.c2 {
color: #004080;
font-family: Arial;
font-size: 85%
}
#lh-col p a {
display: block;
}
<body>
<div id="lh-col">
<p>
<a href="/">
<img src="images/logo.gif" border="0" alt="Text" width="33" height="22">
</a>
</p>
<p>
<a href="/page1/">
<span class="c2">Page 1</span>
</a>
<a href="/page2/">
<span class="c2">Page 2</span>
</a>
<a href="/page3/">
<span class="c2">Page 3</span>
</a>
</p>
</div>
<div id="rh-col">
<!-- The rest of the page... -->
</div>
</body>
Or you can be more semantic and make it simple with flexbox:
nav {
display: flex;
flex-direction: column;
}
<nav>
Link 1
Link 2
Link 3
</nav>
An old hack is to hide the spaces using comments:
<a href="/subpage/"><!--
--><span class="c2">Subpage</span><!--
--></a>
Of course, this causes the code to be more ugly to work with.
I am having trouble getting my div to layout an image and paragraph on the same line, I have search numerous topics on stackoverflow and on google but the no soultions are working.
Due to the web host I am having to use inline css to style the site.
(trust me I would much rather use css files but the ability to do so is not there, due to the chosen web host)
Normally I would use bootstrap to achieve this but as noted that is not an option.
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px;">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="float:right;">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</div>
</p>
</div>
What I'm getting:
What I want:
All you need to do is apply float: left to image
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="texts">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
<img src="http://placehold.it/100x200" width="100" height="200" alt="Image" style="float: left; margin-right: 10px;" /> Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</p>
</div>
</div>
1. Apply a maximum width to sibling element:
Apply a maximum width to the sibling element (#texts) of #image, e.g:
<div id="texts" style="float:right; max-width: 80%;">
Note: max-width property value given only as a demonstration. Adjust accordingly and as per requirements.
As it is now, it contains enough text/content to occupy the whole horizontal width.
2. Declare the display type of first nested element or float left
Declare the first nested element (#image) as either an inline-block, e.g:
<div id="image" style="margin-left: 10px;display: inline-block;">
Or float it left, e.g:
<div id="image" style="margin-left: 10px;float: left;">
Note: this float may need to be cleared on the containing parent element.
As it is now, this element (div) is a block element by default, block elements will occupy the full available width of a containing element.
Code Snippet Demonstration:
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px; display: inline-block;">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="float:right; max-width: 80%;">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting
to read here other than some typo's.</p>
</div>
You can remove float: right from the #texts div and add float: left to the #image div:
<div style="display:inline-block; color:black; border:3px solid #ffd800; margin-bottom:25px; border-radius:10px; background-color: #FFF1AD; box-shadow:13px 15px 6px #2b2626; border-top:30px solid #ffd800;">
<h1 style="color:black; margin-top:-27px; padding-left:5px; font-weight:bold">
This is a title
</h1>
<div id="image" style="margin-left:10px; float:left">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts">
<p style="color:black; margin-top:10px; margin-left:10px; margin-bottom:10px; font-size: 120%">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</p>
</div>
</div>
Using inline isn't normally the best idea, but if that's what you need to do in this case then you can still use Flexbox:
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">This is a title</h1>
<div style="display: flex;">
<div id="image" style="margin-left: 10px;">
<img src="http://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.</p>
</div>
<div>
</div>
With this you need to add another div around the image and text content and set it to display: flex;
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 50px solid #ffd800;">
<h1 style="color:black; margin-top: -40px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px; margin-right: 15px; float:left;">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="">
<p>
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</div>
</p>
</div>
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px;float:left;">
<img src="http://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="float:right;width:90%;">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</div>
</p>
</div>
This question already has answers here:
How to position text over an image with CSS
(8 answers)
Closed 7 years ago.
I am new to html and css. I am trying to make a website. I have four images on a line that works as links. When you hold the mouse over them, they turn transparent. I also want a headline to show up over the transparent image when you hold the mouse over it. But when I put text there it ends up on the line over the images instead of on top of them. The text also do not appear only when the mouse is over it, but it is there all the time. Here is my css:
p2 {
color: white;
font-size: 15px;
font-family: 'Verdana';
}
img {
box-shadow: 7px 7px 4px grey;
padding-left: 18px;
padding-right 18px;
}
img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
}
Here is the html:
<p> TITLE THAT I WANT OVER THE FIRST IMAGE </p>
<a href="LINK1">
<img border="0" src="PHOTOLINK1" width="310" height="214">
</a>
<a href="LINK2">
<img border="0" src="PHOTOLINK2" width="310" height="214">
</a>
<a href="LINK3">
<img border="0" src="PHOTOLINK3" width="310" height="214">
</a>
<a href="LINK4">
<img border="0" src="PHOTOLINK4" width="310" height="214">
</a>
Please help me if you know how to do this, thank you. <3
Try assigning z-index css property to text
You can set your top margin to a negative value.
margin-top: -100px;
This is wrong:
p2 {
Change it with:
p {
You need to nest all the <a>s correctly. You didn't close a lot.
And a solution for you would be, you might need to change the code a little bit:
a {
position: relative;
}
span {
position: absolute;
color: white;
font-size: 15px;
font-family: 'Verdana';
bottom: 0;
left: 0;
right: 0;
background: #000;
}
img {
box-shadow: 7px 7px 4px grey;
padding-left: 18px;
padding-right 18px;
}
img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
}
<a href="LINK1">
<img border="0" src="PHOTOLINK1" width="310" height="214" />
<span> TITLE THAT I WANT OVER THE FIRST IMAGE </span>
</a>
<a href="LINK2">
<img border="0" src="PHOTOLINK2" width="310" height="214" />
</a>
<a href="LINK3">
<img border="0" src="PHOTOLINK3" width="310" height="214" />
</a>
<a href="LINK4">
<img border="0" src="PHOTOLINK4" width="310" height="214" />
</a>
You can use position:absolute and put <p> child of <a> with a class
CSS
p2{
color: white;
font-size: 15px;
font-family: 'Verdana';
}
img {
box-shadow: 7px 7px 4px grey;
padding-left: 18px;
padding-right 18px;
}
img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
}
.LINK1 p {
position: absolute;
top: 20px;
padding: 0px 20px;
}
HTML
<a href="LINK1" class="LINK1">
<p> TITLE THAT I WANT OVER THE FIRST IMAGE </p>
<img border="0" src="PHOTOLINK1" width="310" height="214">
</a>
<a href="LINK2">
<img border="0" src="PHOTOLINK2" width="310" height="214">
<a href="LINK3">
<img border="0" src="PHOTOLINK3" width="310" height="214">
<a href="LINK4">
<img border="0" src="PHOTOLINK4" width="310" height="214">
</a>
Note: Adjust your needs
DEMO HERE
I actually previously had a much longer question but I figured this would be the easiest to get situated. When I initially load my page, some of the items in the navigationBanner get displaced. But after I enter an order number in the text box and it reloads... everything is where it should be. I'm assuming my CSS is not loading when it should be, but I'm not entirely sure because I am entirely noobish at html and css.
Could anyone explain this to me?
Here's my html for the nav bar
<div id="background"><img src="images/blue%20background.jpg" alt="background" width="100%" height="100%" /></div>
<div id="header">
<div id="navigationContainerWrap">
<div id="navigationBanner">
<a href="">
<img src="images/facebook.png" alt="Facebook Link" border="0" style="margin: 4px 0 5px 44px;" /></a>
<a href="">
<img src="images/twitter-2.png" alt="Twitter Link" border="0" style="margin: 4px 0 5px 2px;" /></a>
<a href="">
<img src="images/pinterest-icon.png" alt="Pinterest Link" border="0" style="margin: 4px 0 5px 2px;" /></a>
<img src="images/txtNewCustomers.png" alt="New Customers txt" style="margin: 0px 0 5px 50px;" />
<img src="images/txtExistingCustomers.png" alt="Existing Customers txt" style="margin: 0 0 5px 50px;" />
<a href="">
<img src="images/email.png" alt="Email Link" border="0" style="margin: 4px 10px 6px 0;
float: left;" /></a>
<p style="float: left;">
1.800.BLAH.BLAH</p>
<a href="">
<img src="images/btnOrder.png" alt="New Customers Button" border="0" style="float: left;
margin: 0 0 0 45px;" /></a>
<a href="">
<img src="images/btnLogIn.png" alt="Log in Button" border="0" style="float: left;
margin: 0 10px 0px 25px;" /></
<!-- Order tracking Form input -->
<div class="trackingInput">
Order Status<br />
BloopBloop Order Number:<br />
<input id="txtOrderID" type="text" onkeydown="if (event.keyCode == 13) document.getElementById('btnOrder').click()" />
<input type="button" id="btnOrder" value="Submit" onclick="return btnOrder_onclick()" />
</div>
</div>
Annnnd what I believe is relevant CSS
.trackingInput
{
float: right;
/*padding: 0 5px 0px 0;*/
z-index: 35;
font-weight: normal;
font-family: "Century Gothic";
height: 85px;
margin-top: -45px;
position: relative;
margin-left: -1px;
width: 178px;
}
#navigationBanner
{
background-color: black;
background-repeat: no-repeat;
height: 85px;
width: 600px;
float: right;
color: White;
font-weight: bold;
font-size: small;
}
#navigationContainerWrap
{
background-position: center;
}
#header
{
background-color: White;
background-image: url(../Images/GenericLogo.png);
width: 960px;
height: 140px;
background-repeat: no-repeat;
margin: 0 auto;
position: relative;
z-index: 10;
}
Thanks in advance! And sorry for the info overload.
Possibilities:
You don't emit the same CSS both times
You don't emit the same HTML both times (e.g. you use different tags and/or classes)
One method to track this down using Internet Explorer:
Load your first page (the one that is not working as you expect) in IE
Hit F12 to open developer tools
Click on the Arrow icon in Developer Tools to enter Select mode
Click on a a part of your web page that isn't displaying correctly
Click on the Trace Styles tab (in Developer Tools)
Explore the style tree to see where each style is deriving from