|
CSS - Strange Header Problem In Firefox - Wordpress
Help! I've been holding my head on this one for a couple days.
I have a wordpress theme that works fine in IE7, but in Firefox the header and navigation aligns left instead of center. I have not tested in IE6 yet. I can't, for the life of me, figure out what's causing it. Any help would be greatly appreciated! www dot sccustomfacade dot com slash site Thank you! Similar TutorialsSo, here's what I've got: http://www.anthonycarboni.com The header is supposed to appear 50 pixels high, flush with the top (no margins), with the header text middle aligned inside of it. This is working in IE 6 and 7, but is not working well in FF (mac/pc) or in Safari. Here is all code that pertains to that section. It is sure to be woefully poor, as I'm just getting into CSS: Code: body {
color: #FFFFFF;
background-color: #000000;
font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 0;
line-height: 19px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 1.00;
padding-bottom: 0px;
padding-top: 0px;
text-align: center;
text-decoration: none;
text-indent: 0px;
text-transform: none;
min-width: 800px;
}
.main{
background-color: #202020;
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.header{
height: 50px;
background-image: url('images/header.jpg');
background-repeat: repeat;
}
p.headline {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.8em;
vertical-align: middle;
}
And there you have it. I'm tearing my hair out over what I'm sure is some small thing that anyone with experience would notice immediately. Any help would be greatly appreciated. Thanks! I wish to use a wordpress header on vBulletin and for the most part it has worked. I have a couple issues though with staying logged in + the sub navigation bar. -Visually wise, it perfect on PC's....however it looks odd on my MAC. On MAC in "Safari" Code: http://i250.photobucket.com/albums/gg247/Rush23Hester/Screenshot2010-05-22at25823PM.png On MAC in "FireFox & Chrome : both looked like this" Code: http://i250.photobucket.com/albums/gg247/Rush23Hester/Screenshot2010-05-22at25823PM.png On PC's it "looks" perfect. As the sub navigation bar doesn't give a problem and it's lined up just fine. Any help? I am willing to pay to get this resolved. The style in question is Code: www.chicitysports.com/forum/?styleid=7 I use tables as little as possible, and as such have very little experience of them with CSS - and I'm having a weird problem. I wanted to create a table that has blocks of rows with their own 2px solid border, but with a 1px dotted border between cells. There are other rows between these blocks with no border at all. I've posted a very cut-down version of the page, including just the relevant part of the style sheet, at <http://www.highway57.co.uk/tests/tabletest>. Because of an IE issue (of course! - see below) I ended up resorting to a fairly clumsy method: in the blocks referred to above, all the cells start with a 1px dotted border all round, then there are classes for t, r, b and l that have the corresponding border reset to 2px solid. As there are only two columns, every cell has either one or two of these classes applied. I'm using border-collapse: collapse. This works fine in IE6, IE7, Opera (Mac and Win), Safari, OmniWeb and even Netscape 7.2 (Mac), but in the other Gecko browsers I have - Firefox and Camino - the table sprouts a superfluous vertical scrollbar which scrolls exactly 1 pixel. Rogue horizontal scrollbars I've dealt with before (usually a width issue), but I can't understand why I should get this vertical one, and it's driving me nuts - nothing I try gets rid of it. OK, so why am I doing it this clumsy way? Originally I put each of the bordered blocks of rows in its own tbody, and applied borders to tds, trs or tbodys as appropriate, but neither IE6 nor IE7 appears to support borders on trs and tbodys - can anyone verify this? Nevertheless, I still got the scrollbar problem in Firefox: apart from the IEs, the visible result was exactly the same. Any clues would be gratefully received! Hi there. I have a blank space that appears as a link when my animated T-R MENU button is clicked. Click here to view the problem It didn't do this in the last version of FF... I can't see why it's doing it, there aren't blank spaces in the code to make it behave this way. Opera, Safari and IE view it fine. Just FF3 that's doing it. Can anyone shed some light on why it's doing this or how to fix it? Thanks in advance. The page looks fine in firefox, but in any other browser, the header bar -- the gallerybox div -- shifts up by 4px. Any idea why this might be happening? Thanks in advance The page HTML: Code: <!DOCTYPE html>
<html>
<head>
<title>Home :: Secure Technologies International</title>
<meta name="description" content="Secure Technologies International (STI) is a leading Canadian IT and Information Security solutions company, representing industry leading hardware, software and network security manufacturers; addressing a wide array of requirements." />
<meta name="keywords" content="secure,technologies,international,inc,home,training,firewall,mcafee,professional,services" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="css/themes/SecureTech/main.css" />
<link rel="stylesheet" href="css/themes/SecureTech/menu.css" />
<link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
<script src="include/jquery.js" type="text/javascript"></script>
<script src="include/s3Slider.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- IE HACK FOR SLIDESHOW CENTERING -->
<!--[if IE]>
<style type="text/css">
#image img
{
left: 50%;
margin-left: -250px;
}
</style>
<![endif]-->
<script type="text/javascript" src="include/prototype.js"></script>
<script type="text/javascript" src="include/functions.js"></script>
<script type="text/javascript">
( function($) {
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
} ) ( jQuery );
</script>
</head>
<body onload="SetOrigin()">
<div class="contactbox">
Reach us by phone toll free at 1-866-417-3579<br/>
Or by email at sales@securetechnologies.ca
</div>
<div class="container">
<ul class="menu">
<div class="search">
<form method="get" action="searchres.php">
<input type="hidden" name="referpage" value="home" />
<input name="hsearch" value="" onclick="OnSearchClick();" onblur="OnSearchUnclick();" style="margin-top:2px; position: relative; top: -9px; width: 230px;" />
<input type="image" src="images/search-icon.png" height="28px" />
</form>
</div>
<li><a href="?page=home" class="active"><span>Home</span></a></li>
<li><a href="?page=news" ><span>News</span></a></li>
<li><a href="?page=partners" ><span>Partners</span></a></li>
<li><a href="?page=support" ><span>Support</span></a></li>
<li><a href="?page=services" ><span>Professional Services</span></a></li>
<li><a href="?page=training" ><span>Training</span></a></li>
<li><a href="?page=contact" ><span>Contact Us</span></a></li>
<li><a href="?page=about" ><span>About Us</span></a></li>
</ul>
<div class="ContentMenu">
<a href="http://www.mcafee.com/us/mcafee-labs/threat-intelligence.aspx">McAfee Threat Intelligence</a> | <a href="http://www.trustedsource.org/en/threats/malware_top">Top Malware Today</a> <br/><br/>
<div class="ContentMenuSUB">
<b>Next Training Week Starts:</b> 18th of July, 2011<br/>
<b>Next Upcoming Event:</b> McAfee and STI Firewall User Group - 13th of July, 2011<br/>
</div>
</div><div class="gallerybox">Home</div>
<div class="content">
<div class="heading"></div>
<div class="newsimg" style="background: url(images/thumbnails/th_Dominican-Republic-Flag.png);"></div>
<div class="newsitem">
<b>Kevin De Snayer returns from heroic venture to the Dominican Republic</b> posted on the 2011-06-14 at 15:43:20<br/>
Source: <i><a href="http://www.youtube.com/watch?v=oHg5SJYRHA0">www.youtube.com</a></i><br/>
<div class="eventdesc"></div>
</div><br/>
<div class="newsimg" style="background: url(images/thumbnails/apple_logo.thumbnail.jpg);"></div>
<div class="newsitem">
<b>Top 10 iPhone Passcodes Revealed</b> posted on the 2011-06-14 at 17:30:35<br/>
Source: <i><a href="http://www.itnews.com/smartphones/33511/top-10-iphone-passcodes-revealed">www.itnews.com</a></i><br/>
<div class="eventdesc"><p>
There are 10,000 possible passcodes for an iPhone, yet 15 percent of users have one of the 10 most popular codes, according to app developer <a href="http://amitay.us/index.php">Daniel Amitay</a>, whose <a href="http://amitay.us/projects/big%20brother.php">Big Brother Camera Security app</a> records anonymous passcode data from users.</p>
</div>
</div><br/>
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="images/home/1.png" />
<span>"A next-generation firewall that restores control and protection to your network"<br/> -McAfee Inc.</span>
</li>
<li class="s3sliderImage">
<img src="images/home/2.png" />
<span>STI Training: Certified McAfee Instructors available for Advanced administration and Support training.</span>
</li>
<li class="s3sliderImage">
<img src="images/home/3.png" />
<span>STI MASP Program: Certified McAfee Support Specialists waiting to help you 24/7.</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
</div>
</div>
<div class="footer">
<a href="?page=privacy">Our Privacy Policy</a> | Copyright 2011, Secure Technologies International Inc. <div class="footicons"><a href="http://twitter.com/SecTechOttawa"><img src="images/twitter.png" style="border:none;" alt="twitter" /></a> <a href="news.rss.php"><img src="images/rss.png" style="border:none;" alt="rss" /></a></div>
</div>
</body>
</html>
The page CSS: Code: html, body
{
min-height: 100%;
background: #000000 url(../../../images/grad.jpg) top left repeat-x;
font-family: 'Arimo', arial, serif;
}
a:link
{
color:#3399FF;
text-decoration:none;
}
a:visited
{
color:#3399FF;
text-decoration:none;
}
a:hover
{
color:#0066FF;
text-decoration:none;
}
a:active
{
color:#99CCFF;
text-decoration:none;
}
.container
{
border-left: 1px solid black;
border-right: 1px solid black;
margin-left: auto;
margin-right: auto;
width: 964px;
min-height: 100%;
background: #FFF;
/*-moz-box-shadow: -0px -0px 50px #000;
-webkit-box-shadow: -0px -0px 50px #000;
box-shadow: -0px -0px 50px #000;*/
margin-bottom: 26px;
}
.spamcube
{
height: 25px;
background: url(../../../images/spam_red.jpg);
color: white;
font-size: 15px;
}
.spamcubevalid
{
height: 25px;
background: url(../../../images/spam_green.jpg);
color: white;
font-size: 15px;
}
.productswidget
{
width: 100%;
min-height: 30px;
margin-left: auto;
margin-right: auto;
}
.logomenu
{
display:block;
vertical-align:middle;
background: #DDD;
margin-top: -5px;
margin-left: -5px;
margin-right: -5px;
border-bottom: 1px black solid;
height: 50px;
}
.logomenu li
{
padding:0;
margin:0;
margin-right: 5px;
margin-left: 5px;
list-style:none;
display:inline;
vertical-align:middle;
}
.logomenu li a.active
{
padding-top: 10px;
position:relative;
top: 10px;
}
.productcontainer
{
width: 900px;
margin: 25px;
}
.productcontainer .bart
{
margin: 0px;
width: 900px;
}
.productcontainer .bar
{
margin: 0px;
width: 900px;
margin-left: 15px;
}
.productcontainer .bar a .more
{
color: #BBB;
text-align: center;
}
.productcontainer table
{
width: 900px;
margin: 0px;
border: none;
}
.trainingform
{
width: 700px;
margin-left: auto;
margin-right: auto;
background: #DDD;
min-height: 100px;
margin-top: 30px;
font-size: 18px;
font-weight: bold;
margin-bottom: 30px;
}
.trainingform input
{
width: 500px;
margin-right: 20px;
}
.trainingform .submitb
{
width: 100px;
margin-left: 600px;
}
.trainingform textarea
{
width: 500px;
height: 100px;
margin-right: 20px;
}
.ttop
{
position: relative;
top: -87px;
display: inline;
}
.error
{
color: #FF0000;
}
.ContentMenu
{
margin-top: 5px;
text-align: center;
margin-bottom: 15px;
margin-left: 5px;
position: relative;
top: 45px;
}
.ContentMenuSUB
{
height: 35px;
margin-top: 5px;
text-align: left;
}
a
{
text-decoration: none;
}
.heading
{
font-size: 25px;
color: #000066;
}
.content
{
min-height: 250px;
margin: 5px;
}
.search
{
position: relative;
top: 1px;
float: right;
}
.footer
{
margin-left: auto;
margin-right: auto;
width: 966px;
background: #000;
color: #FFF;
margin-top: -26px;
height: 27px;
text-align: right;
}
.footicons
{
margin-top: -17px;
margin-left: 5px;
text-align: left;
}
.headerLogo
{
width: 964px;
padding: 7px;
margin-left: auto;
margin-right: auto;
}
.gallerybox
{
width: 1000px;
height: 45px;
border: 1px solid black;
position:relative;
left: -18px;
top: -100px;
background: #000;
color: #FFF;
font-size: 35px;
text-align: center;
}
.gallerybox
{
width: 1000px;
height: 45px;
border: 1px solid black;
position:relative;
left: -18px;
top: -100px;
background: #000;
color: #FFF;
font-size: 35px;
text-align: center;
}
.gallerybox_nosub
{
width: 1000px;
height: 45px;
border: 1px solid black;
position:relative;
left: -18px;
top: -60px;
background: #000;
color: #FFF;
font-size: 35px;
text-align: center;
}
.gallerybox_static
{
width: 1000px;
height: 45px;
border: 1px solid black;
position:relative;
left: -18px;
top: -15px;
background: #000;
color: #FFF;
font-size: 35px;
text-align: center;
}
.contactbox
{
margin-left: auto;
margin-right: auto;
width: 966px;
text-align: right;
background: url(../../../images/logomain.png) top left no-repeat;
height: 80px;
margin-top: 5px;
font-size: 18px;
}
.gmaps
{
width: 400px;
height: 400px;
margin-left: auto;
margin-right: auto;
}
.closadiv
{
width: 100%;
overflow: hidden;
height: 35px;
}
.partnername
{
font-size: 22px;
position: relative;
top: 5px;
}
.newsitem
{
width: 828px;
position: relative;
left: 132px;
}
.newsimg
{
background: #CCCCCC;
width: 128px;
height: 128px;
position: relative;
top: 132px;
margin-top: -132px;
font-size: 18px;
color: #999999;
}
#s3slider {
width: 964px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
left: -5px;
overflow: hidden; /* important */
background: white;
}
#s3sliderContent {
width: 964px; /* important to be same as image width */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
left: -40px;
top: -16px;
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 15px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 964px;
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
top: 0;
/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}
.clear {
clear: both;
}
.eventdesc
{
min-height: 128px;
width: 100%;
}
.mintype
{
font-size: 13px;
}
The Menu CSS: Code: /*
Generated via www.cssmenubuilder.com
Copyright (c) 2008-2010 www.cssmenubuilder.com
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
*/
.menu
{
margin:0 auto;
padding:0;
height:30px;
width:1000px;
display:block;
background:url("../../../images/topMenuImages.png");
border: 1px solid black;
position:relative;
left: -18px;
}
.menu li
{
padding:0;
margin:0;
list-style:none;
display:inline;
}
.menu li a
{
float:left;
padding-left:15px;
display:block;
color:rgb(255,255,255);
text-decoration:none;
font:12px Verdana, Arial, Helvetica, sans-serif;
cursor:pointer;
background:url("../../../images/topMenuImages.png") 0px -30px no-repeat;
outline:none;
}
.menu li a span
{
line-height:30px;
float:left;
display:block;
padding-right:15px;
background:url("../../../images/topMenuImages.png") 100% -30px no-repeat;
}
.menu li a:hover
{
background-position:0px -60px;
color:rgb(255,255,255);
}
.menu li a:hover span
{
background-position:100% -60px;
}
.menu li a.active, .menu li a.active:hover
{
line-height:30px;
font:12px Verdana, Arial, Helvetica, sans-serif;
background:url("../../../images/topMenuImages.png") 0px -90px no-repeat;
color:rgb(255,255,255);
}
.menu li a.active span, .menu li a.active:hover span
{
background:url("../images/topMenuImages.png") 100% -90px no-repeat;
}
I'm currently making some site about webmaster resources, etc... The site displays fine in firefox, but looks really fu/cked up in IE. Can someone help me fix this? I was trying to make all 3 column to have equal height, and i found some way which works only in FF&Opera. Still, i have problem when i have too much text. Hey, Check out the attachment. (I had to spray paint out the important parts that would highly violate the NDA) Here is some of the CSS: Code:
.currentprojects{
margin-top:10px;
margin-left:8px;
width:245px;
}
.currentprojects .proj_heading{
font-weight:bold;
padding-left:8px;
color:#005e9d;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image:url(../images/leftside_midsect_mid.gif);
font-size:18px;
padding-bottom:5px;
}
.currentprojects .proj_content{
padding-left:8px;
background-image:url(../images/leftside_midsect_mid.gif);
}
.rssfeeds{
margin-top:10px;
background-image:url(../images/leftside_midsect_mid.gif);
margin-left:8px;
width:245px;
}
.rssfeeds .rss_heading{
font-weight:bold;
padding-left:8px;
color:#005e9d;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
padding-bottom:5px;
}
.rssfeeds .rss_content{
padding-left:8px;
color:#000000;
}
img{
margin-bottom:0;
vertical-align:text-bottom;
}
Now, the projects one is the top. And the rss is the bottom. Here is the HTML code Code:
<div class="currentprojects">
<img src="images/leftside_midsect_top.gif" />
<div class="proj_heading">
Heading
</div>
<img src="images/leftside_midsect_midsplit.gif" />
<div class="proj_content">
stuff
</div>
<img src="images/leftside_midsect_bot.gif" />
</div>
<div class="rssfeeds">
<img src="images/leftside_midsect_top.gif" />
<div class="rss_heading">
Heading
</div>
<div class="rss_content">
stuff
</div>
<img src="images/leftside_midsect_bot.gif" />
</div>
Does anyone have any idea why this is doing that in IE? FF it works fine (like that's really a surprise anymore). Hi all, Please see http://www.jaysonsgroup.com/ztest/ntc/zcontact.html It's full of tests, but here's the problem.. The "Do you need more than one NTC Card" text at the bottom, needs to be followed by the text "(To share the Modem with friends)?*" IMMEDIATELY below it... Unfortunately, in IE, there is a spacing problem - see the link below for 2 screenshots for what I mean: http://www.jaysonsgroup.com/ztest/ntc/zie.gif The code is simple: Code: <div class="fieldname_long">Do you need more than one NTC Card</div> <div class="fieldvalue">(input field will come here)</div> <div class='spacer_1px'> </div> <div class='fieldname_text'>(To share the Modem with friends)?*</div> The CSS: Code:
.spacer_1px {
clear: both;
height: 1px;
overflow:hidden;
background: blue;
}
.fieldvalue {
float: left;
background: #ccc;
display: inline;
margin: 0;
}
.fieldname_long {
float: left;
width: 120px;
line-height: 13px;
padding-right: 15px;
color: #B30000;
font-weight: bold;
background: #eee;
display: inline;
margin: 0;
}
.fieldname_text {
color: #B30000;
font-weight: bold;
}
Note - I justr added "display:inline" and "margin:0" above to 'fieldname_long' and 'fieldvalue' but it doesn't fix anything in IE In the test link above, you can see that the blue line is the spacer_1px and that line should be touching the fieldname_long (light grey box). This happens in Firefox. But in IE, there's a gap which I need to remove. Sorry this is a really small thing but I just can't figure it out! Any ideas? Many thanks! Hello. Im new to the forums and Im hoping someone would be able to help me and I hope Im posting in the correct forum. I recently redesigned my site with Adobe Dreamweaver utilizing CSS. Both the HTML and CSS validates. I have tried to search for my problem but havent found it already addressed. I had CSS before but my old software didnt support it as well. Im still learning a lot about the CSS so my problem might be minor, but I just dont have enough knowledge yet to know or to even begin to fix it. The site appeared fine in IE. I didnt think (stupid I know) to test it in firefox. Recently I did and noticed it did not show the top header, the right menu or did it allow you to scroll down the page. Ive read elsewhere that part of my problem may be due to having this at the top of my page Code: <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> but if I remove that, then the site looks the same in IE as it does in Firefox. Here is a link to the index page of my site. I currently have the above line of code in the page so you can see what it is suppose to look like. Please view this in both browsers so you can see what its suppose to look like (IE) and how firefox is displaying it: http://www.herbal-connection.com/index.htm Here is a copy of my css: Code: table.sale {
border-collapse: separate;
background-color: white;
text-align: center;
vertical-align: middle;
width: 30em;
margin-left:auto;
margin-right:auto;
}
img
{ border-style: none;
}
body {
text-align: center;
color: #FFFFFF;
background-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 95%;
}
.twoColFixRtHdr #container {
width: 1043px;
margin: 0 auto;
border: thin solid #000000;
text-align: justify;
background-color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
color: #000000;
}
.twoColFixRtHdr #header {
background-image: url(herbalconnectionlogo1.gif);
HEIGHT: 82px;
background-repeat: no-repeat;
overflow: visible;
position: fixed;
}
.twoColFixRtHdr #header h1 {
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
COLOR: #004278;
font-size: 30px;
background-color: transparent;
margin-top: 0em;
margin-right: 0em;
margin-bottom: 0em;
margin-left: 5px;
}
.twoColFixRtHdr #header H2 {
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
COLOR: #006397;
background:transparent;
vertical-align: top;
font-size: 20px;
margin-top: 0em;
margin-right: 0em;
margin-bottom: 0em;
margin-left: 5px;
}
.twoColFixRtHdr #mainContent {
background-color: #FFFFFF;
padding-right: 20px;
padding-left: 20px;
position: fixed;
width: 860px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: medium;
color: #000000;
}
.twoColFixRtHdr #mainContent h1 {
PADDING: 0em;
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
FONT-SIZE: x-large;
text-align: center;
COLOR: #004278;
MARGIN: 1em;
background-color: #FFFFFF;
}
.twoColFixRtHdr #mainContent h2 {
PADDING: 0em;
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
FONT-SIZE: large;
text-align: center;
COLOR: #004278;
MARGIN: .1em;
background-color: #FFFFFF;
}
.twoColFixRtHdr #mainContent h3{
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
COLOR: #004278;
font-size:medium;
text-align:center;
background:transparent;
margin-top: .5px;
}
.twoColFixRtHdr #mainContent h4{
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
color:#B22222;
font-size:medium;
text-align:center;
background:transparent;
margin-top: .5px;
}
.twoColFixRtHdr #mainContent a:link {
color: #B22222;
font-weight:bold;
background-color: #FFFFFF;
}
.twoColFixRtHdr #mainContent a:visited {
color: #B22222;
background-color: #FFFFFF;
}
.twoColFixRtHdr #mainContent a:hover {
color: white;
background: black;
}
.twoColFixRtHdr #mainContent a:active {
color:#B22222;
background-color: #FFFFFF;
}
.twoColFixRtHdr #sidebar1 {
float: right;
width: 140px;
background-color: #D7DEE4;
text-align: center;
position: fixed;
background-position: top;
font-family: Georgia, "Times New Roman", Times, serif;
color: #000000;
}
.fltrt {
float: right;
margin-left: 8px;
width: 0px;
}
.fltlft {
float: left;
margin-right: 8px;
width: 0px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.center {
text-align: center;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: medium;
color: #000000;
background-color: #FFFFFF;
}
.hrule {
border-bottom-width: 0.04em;
border-bottom-style: solid;
border-bottom-color: #000000;
padding-top: 0em;
padding-bottom: 1em;
}
I appreciate all input anyone can give, just please dont get to high techy with me as Im still learning. This is my business site and now I see why my sales have declined since probably a lot of people cant see the site properly. Please let me know if you need any other details. Thanks, Pamela Using my http://www.thatspotonline.com as an example I'll explain my problem. I'm trying to use a 3 column fluid layout with a header and a footer. I've gotten past the browser problem with IE and now face a new problem with proper display in firefox. With the included css and attached xhtml layout I end up with a rather large gap on the bottom of the design without adding quite a bit of content to make the page length grow. I've tested with about everything else and this problem doesn't show up. I would gladly take some advise if anyone has any thanks. Code: * {
margin:0 auto;
padding:0;
}
h2 {
font:bold 2em/1.4 "Lucida Bright", Georgia, Times, serif;
color:#8B9F86;
}
h3 {
font:bold 1em/1.6 "Lucida Bright", Georgia, Times, serif;
color:#845697;
}
a {
color:#4C53E0;
}
a:focus, a:hover, a:active {
color:#EB8518;
}
body {
background:#000000 url(images/body2.jpg);
background-repeat:repeat;
background-position:top left;
font-size:90%;
margin:0 auto;
padding: 24px 0;
}
#outer {
margin:0 auto;
width:80%;
min-width:40em;
max-width:70em;
border:10px solid #EEEEEE;
border-width:0 5px;
background:#EEEEEE;
}
ul#nav:after, #outer:after, #sub:after, form:after, form div:after {
content:".";
display:block;
visibility:hidden;
clear:both;
height:0;
}
* html #nav, * html #content, * html form, * html form div {
height:1%;
}
ul#access, .off {
position:absolute;
left:-1000em;
top:-1000em;
}
hr {display:none}
#header {
background:#EBEBE9 url(images/banner-bg2.jpg) repeat-x left bottom;
}
#header h1 {
padding-left:.6em;
font:bold 3em/2.5 "Lucida Bright", Georgia, Times, serif; /* line-height allows for image of buildings */
letter-spacing:1pt;
color:#FFFFFF;
background: transparent url(images/banner2.jpg) no-repeat right bottom;
}
#header h1 a {
color:#FFFFFF;
text-decoration:none;
}
ul#nav {
list-style:none;
margin:3px 0 1em;
text-align:center;
background:#FFFFFF;
border-top:2px solid #444444;
border-bottom:2px solid #444444;
}
#nav li {
list-style:none;
margin:0 auto;
width:94%;
min-width:40em;
max-width:70em;
display:block;
text-align:center;
background:#000000;
}
* html #nav li {
width:24.9%;
}
#nav a {
display:block;
font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
text-decoration:none;
color:#444444;
margin:1px;
background:#FFFFFF;
}
#nav a:focus, #nav a:hover, #nav a:active {
border:1px inset #8B9F86;
margin:0;
color:#EB8518;
text-decoration:underline;
}
ul#nav li#active {
background:#FFFFFF;
font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
color:#000000;
text-decoration:underline;
}
#sub, #right {
font: 1em/1.5 'Lucida Grande', arial, verdana, sans-serif;
word-spacing:.1em;
margin-bottom:1em;
}
#sub {
width:74%;
float:left;
position:relative;
}
#center {
width:65%;
float:right;
}
#left {
width:33%;
float:left;
}
#right {
width:25%;
float:right;
}
#center p {
margin:.5em 2% .5em 0;
}
img.img-right {
float:right;
}
#left h2 {
color:#845697;
font-size:1.5em;
}
#left p {
font-size:.9em;
}
#right {
font-size:.9em;
}
#right h2 {
font-size:1.2em;
}
/** Footer **/
#footer {
clear:both;
margin-top:1em;
font: 0.9em/1 'Lucida Grande', arial, tahoma, verdana, sans-serif;
border-top:3px double #C8DCC2;
}
#footer p {
margin:1em 1em 1em 0;
text-align:center;
padding: 21px 0;
}
#footer ul {
list-style:none;
margin-top:.7em;
}
#footer li {
display:inline;
border-right: 1px solid #C8DCC2;
padding:.3em 2%;
}
I was wondering if someone could give me a hand on a CSS problem I am having. This is for my personal site that my wife and I use to update people on our lives. I have the page at a temporary location right now as I am moving the site between servers. Anyhow, I am working with WordPress and redoing the stylesheet. I am about half way done and am having a very strange problem. You can view the page here. The CSS is located below: Code: body,html {
margin: 0;
padding: 0;
font: 10pt/15pt arial;
background: #800000 url(images/topback.jpg) repeat-x top;
text-align: center;
}
hr,h1,.description {
display: none;
}
h2 {
margin: 0;
padding: 0;
}
#page {
width: 843px;
text-align: left;
background: url(images/mainback.jpg) repeat-y;
}
#header {
background: url(images/header.jpg) no-repeat;
height: 275px;
}
#content {
float: left;
width: 300px;
padding-left: 100px;
}
#sidebar {
float: left;
width: 200px;
font-size: 8.5pt;
}
#sidebar li {
list-style-type: none;
}
#footer {
clear: both;
}
Here's the problem. In IE the width of the 'content' div is 509 pixels as can be seen by the red border (put in there to show the borders of the div). I am not defining the width to be 509 pixels, it is just defaulting to that width. You need to look at the page in IE...in Firefox it works fine. if you look at my web page http://www.invalidheart.org/index.php when i have two or more entries my layout looks totally messed up, when i just have one entry, everything is fine. I can't for the life of my figure out what's going wrong with my template when i have 2+ posts. this is my index.php which is the template for wordpress: Code: <?php
/* Don't remove this line. */
require('./wp-blog-header.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/1">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Invalid Heart - The Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<style type="text/css" media="screen">
@import url( <?php wp_stylesheet("default"); ?> );
</style>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="http://www.invalidheart.org/ie7-standard.js" type="text/javascript">
</script>
<![endif]-->
<link rel="stylesheet" type="text/css" media="print" href="<?php echo get_settings('siteurl'); ?>/print.css" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body id="sectionone">
<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>
<div id="wrap">
<div id="header"></div>
<div id="container">
<div id="menu"><?php include ("menu.php"); ?></div>
<div id="extra">
<h3>Navigation</h3>
<div class="line"></div>
<div class="item">
<ul class="nav">
<?php include ("navigation.php"); ?>
</ul>
</div>
<h3>Change Style</h3>
<div class="line"></div>
<div class="item">
<ul class="nav2">
<?php wp_style_switcher(0); ?>
</ul>
</div>
<h3>Recent Posts</h3>
<div class="line"></div>
<div class="item">
<ul class="nav2">
<?php get_recent_posts(); ?>
</ul>
</div>
<h3>Archives</h3>
<div class="line"></div>
<div class="item">
<ul class="nav2">
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
<h3>Links</h3>
<div class="line"></div>
<div class="item">
<ul class="nav2">
<?php include ("links.php"); ?>
</ul>
</div>
</div>
<div id="main">
<h3>News & updates</h3>
<div class="line"></div>
<div class="item">
<?php the_date('','<h4>','</h4>'); ?>
<?php the_content(); ?>
<p>Thanks: <?php comment_plugger(); ?></p>
<p><?php wp_link_pages(); ?>
<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?></p>
<!--
<?php trackback_rdf(); ?>
-->
<?php include(ABSPATH . 'wp-comments.php'); ?>
<br style="clear:both;" />
<?php endforeach; else: ?><br style="clear:both;" />
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?><br style="clear:both;" />
<div id="center"><div class="break"></div></div>
</div>
</div><br style="clear:both;" /></div>
<div id="copyright"><?php include ("copyright.php"); ?></div></div>
<br style="clear:both;" />
</body>
</html>
and my css is he http://invalidheart.org/wp-style/default/style.css any suggestions? Hi, I've done an English site which works but now I'm doing the language versions..in particular, Arabic, which is read from right-to-left (direction: rtl) http://www.ntcjapan.com/languages/arabic/dindex.html On IE, the page looks fine. On Firefox, however, the <UL> tags (see light blue and normal blue text in middle of page) are being aligned to the right, overlapping the <div id="main"> which is supposed to contain it. Code: #main {
width: 590px;
padding-top: 115px;
padding-left: 4px;
padding-right: 5px;
background: url(../../../images/0_logo.gif) no-repeat;
float: left;
margin: 0px 3px 0px 0px;
}
I do want everything aligned to the right, since Arabic is apparently read that way, but I need the effect as shown on IE. Any ideas how to make this work? Also, if anyone has any recommendations on what I could do to fix the W3C validation errors , please let me know. Thanks very much in advance! Quick question, can someone tell me why do i get a white space on the right side of the screen http://www.impulsanl.org/testing.htm on IE 7 and IE 8? It seems to work ok with firefox and google chrome. (all screen). CSS code: Code: #extraDiv1 {
background: url(images/header1.png) repeat-x;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
HTML Quote: <div id="extraDiv1"></div> thanks. Hi all I'm working on the following XHTML/CSS2 page: http://www.josh.ch/files/temp/strange_ff_effect It's very clean XHTML and CSS2 in my opinion, and it's displayed correctly in Firefox, Opera and Safari. However, I experience a very strange bug in Firefox2/OSX! When single clicking with the mouse somewhere on the white ground in the header area, all text on the page is selected! Try it! Click on the "Kanton Aargau" logo or anywhere in the same area, and tell me if you experience this, too. I never had an error like this, and I have no idea what could cause the problem. Any ideas? Thanks a lot Josh If you take a look at the following site... http://www.impulsive-solutions.co.uk/test/test.htm In the central column you will see a grey border. On the left of that border there is a gap between the left border and the connecting top and bottom bits. Why is this happening? and secondly why is it only happening on the left hand side. Furthermore, in firefox it works fine, there is no gap. Andy Is it possible to pickup a browser worm by visiting a .php webpage? The symptoms are that when I view htm pages from either of the 2 websites I work on - or I visit Microsoft website - the print is all tiny and screwed up. This happens whether I view the htm files on the web or located on any computer in my home/office network. If I view the same files from any other browser/computer - they are perfectly OK. So it's just this browser on this computer - which incidentally views any other website or file perfectly. The page I am suspicious of is http://www.w6dek.com/w6dek10.php. This link was sent to me as a location to do a link exchange. I was suspicious because the email had an attachment - one of those ATTxxxxx.txt types - so I suspected a virus and didn't open it. However, I checked out the http://www.w6dek.com homepage URL and it seemed like a legit site, so I was curious about that page and visited it thinking that just arriving at a php page would not activate anything. But then I got the problem. I've scanned with Norton 2005 with latest updates and got nothing, and I'm right up-to-date with windows security updates too. But I've still got this weird problem. I've also deleted all cached files and cookies etc.. Any ideas! I know there's a really good group in Switzerland that are all over this stuff, but I can't remember the address. Has anyone got a resource? Or an idea? check out parrisstudios(dot)com/mirage_framing In firefox it is normal, but in ie 6 when you hover over one of the links it gives you a weird drop down box type thing, but it wont go away until you refresh. I wan't to say it is like that peek-a-boo bug but backwards.... Code: ul{
margin: 0;
padding: 0;
list-style:none;
width: 410px;
float:left;
position:relative;
line-height:20px;
}
ul a{
line-height:10px;
float:left;
display:block;
padding: 0 12px;
text-decoration:none;
color: #C0AEA0;
position:relative;
}
li a:hover {
margin: 0;
padding: 0 12px;
float:left;
position:relative;
background-color:#EADED2;
line-height:20px;
}
ul li{
float: left;
background-color:#ffffff;
position:relative;
line-height:20px;
}
li a{
display:block;
text-decoration:none;
color: #C0AEA0;
float:left;
position:relative;
line-height:20px;
}
THANKS! I have a problem with a site, first mistake i made was i built it to firefox, without testing along the way (please dont hurt me im new to web design) so i found a lot of problems in ie. So i fixed for ie7,8,9 but in 6 i get some two divs from the content area stacked one on the other at the top of the screen but when a link inside the problem div(s) is hovered they go to where they should be. any ideas about that? |
|||||||