|
CSS - Help W/ Css Spacing In Firefox Vs. Ie
I am trying to build out this site
http://realitysol.com/index.php# In IE it shows up fine. In Firefox there is a space above the navigation Panel. Any help would be appreciated. Below is the CSS used for the navigation Section. Code:
#navibg {
background-image: url(../images/navibg.jpg);
width: 500px;
height: 40px;
background-repeat: repeat-x;
}
#headerImg {
height: 250px;
width: 500px;
}
#navcontainer ul li
{
list-style-type: none;
margin: 0;
display: block;
float: left;
background: url(../images/navi-normal.jpg) repeat-x 20px;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
text-align: center;
}
#navcontainer a
{
color: #000;
text-decoration: none;
display: block;
width: 70px;
border: 1px solid #666666;
}
#navcontainer li#active { background: url(../images/navi-hover.jpg) repeat-x 20px; }
#navcontainer a:hover { background: url(../images/navi-hover.jpg) repeat-x 20px; }
#navcontainer {
margin-top: 10px;
margin-left: 30px;
}
Similar Tutorialsis there a way to control the pixel amount a br will space in IE and FF so it's the same distance or is there just an issue in my css causing extra space? I created a CSS box where there's a header image & a css box under it, having 3 sides (no top border). It looks good in firefox, but can't get the box to close all the way (by meeting the header image) in explorer. There's a 2-3 px space there. li'l help please? I dont understand the purpose of Browser that behave differently from each other. Couldn't the browser makers just make it result consistently? This is my code to make my line spacing bigger or padding. I try to do other style changes and it also has the same problems. In Firefox, doing it this way works but in IE, nothing happens. Code: h1 {
font-size: 10px;
font-weight:bold;
line-height:50px;
padding:10px 10px 10px 10px;
}
Code: h1 {
font-size: 10px;
font-weight:bold;
padding:10px 10px 10px 10px;
}
Then on my web page I put this in on the text I want to customise. Code: <h1>Sample Text</h1> h1 text is inside my little div box. Am I doing this wrong to achieve what I want? Hi everybody. I'm attempting to format video thumbnails horizontally across a page, and I'm experiencing some very weird behaviors. A bit of basic background on the site - this is a Drupal 5 site sporting a customized version of the "Lite Jazz" theme. XHTML & CSS are both valid. Basically, I just want to have the thumbnails scroll horizontally from left to right, then break and continue directly underneath. However, I am getting this odd "stair" effect in Firefox (for lack of a better way to put it). The alignment looks fine in IE, however in IE the thumbnail furthest to the right is squashed up against the side of the border. I have attached two screenshots to give you an idea. Below is a sample of the video thumbnail HTML that is output by Drupal and all (what I think is) all of the pertinent CSS styling. Additionally, I am aware that I can combine several of these CSS classes, so there is no literal need for multiple div tags, but these divs are generated by a short series of tpl files, and I don't think they are hurting anything. I could of course be wrong, but it would be hard to really consolidate them they way that the template is structures. Here's the HTML involved: Code: <div class="node">
<div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/48"><img src="http://kathleenmackie.com/files/48_AtlantaFinal.jpg" alt="Watch this video!" /></a><br />
vid: 48<br />
type: video<br />
status: 1<br />
created: 1207090735<br />
</div></div>
</div>
<div class="node">
<div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/47"><img src="http://kathleenmackie.com/files/47_FirefoxScreenSnapz003.jpg" alt="Watch this video!" /></a><br />
vid: 47<br />
type: video<br />
status: 1<br />
created: 1206652960<br />
</div></div>
</div>
<div class="node">
<div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/45"><img src="/sites/all/modules/flashvideo/thumbnail_MIA.png" alt="thumbnail unavailable" /></a><br />
vid: 45<br />
type: video<br />
status: 1<br />
created: 1204256880<br />
</div></div>
</div>
And the CSS as well.... Code: .node {
display: inline;
padding: 5px 10px 10px;
}
.node .content, .comment .content {
margin: 0;
}
.node .taxonomy {
font-size: 0.8em;
padding-left: 1.5em;
}
.node .picture {
border: 1px solid #ddd;
float: right;
}
.video {
border: 1px solid #1e6730;
background-color: #beff93;
padding: 5px 10px 10px;
clear: right;
float: left;
display: inline;
margin: 15px;
}
#header, #content {
width: 100%;
}
.node .content, .comment .content {
margin: 0;
I would include a bbcode link to the site, but apparently new users cannot do that (I suppose that makes sense from a spamming standpoint). Site is located at kathleenmackie.com. I also have screenshots from IE and Firefox detailing the problems, but again I apparently can't attach files or images (??). Thanks folks... hoping somebody has an idea or two. Again, I do have screenshots as well..... This is starting to bug me this problem, but on my site www.readinginfo.co.uk the background image (inner shadow and small gradient) at the top is playing up. It doesn't seem to want to align all the way over to the left, however as is always the way, it is working in firefox, ie7, 8 and safari. I've tried some of the ie6 fixes mentioned but I have the sneakiest of feelings that it is to do with the form element (the search box), positioning absolutely just bumps it over to the side. Thanks in advance for any reply!! Hi there, we have created the following list menu and we want to reduce the space between the left hand page margin, and the disc, at the 1st part of the text closer. Example: This is what we see now. | Text Here Example: This is what we would like to see. | Text Here Any suggestions? ul a, li a{ margin:0; padding:0; } I have a drop down menu that works great in Chrome but in IE 9 I am getting spaces between my images for my navigation bar. My HTML is as follows... HTML Code: <ul id="nav"> <li><a href="#"><img src="../../images/global/header/home_btn.jpg" width="77" height="29" border="0" /></a> <ul> <li><a href="#" style="color:#000;">About Asthma</a></li> <li><a href="#" style="color:#000;">Treatment</a></li> <li><a href="#" style="color:#000;">Taking Control</a></li> <li><a href="#" style="color:#000;">Lifestyle</a></li> <li><a href="#" style="color:#000;">Resources & Support</a></li> </ul></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> <li><a href="#"><img src="../../images/global/header/kids_btn.jpg" width="66" height="29" border="0" /></a></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> <li><a href="#"><img src="../../images/global/header/allergy_btn.jpg" width="67" height="29" border="0" /></a></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> </ul></li></ul> I have tried everything in my CSS to eliminate the spacing between the image files with no luck. Does anyone see what I am doing wrong here? This is my first time ever working with CSS. I am trying to put together a site; however, I am havings some setbacks straight out of the gate. I am trying to get the navigation bar to align up against the header. How do I eliminate the spacing between the header and the navigation bar? I have tried the padding: 0; method with no luck. PLEASE HELP! I am new to doing layouts in CSS and have a page (on an existing site) that I just did using CSS. The problem that I am having is that the "content" div has unwanted space above and below the div. I have padding & margins set to zero for the content div. Page is he http://www.prairieplugs.com/Sample1/sample1.htmlhttp://www.prairieplugs.com/Sample1/sample1.html CSS is he http://www.prairieplugs.com/Sample1...ieplugscss1.css Below is the CSS that is applicable: Code: body {
margin: 0px;
padding: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: .9em;
color: #000;
background-color: #008F13;
background-image: url(images/bgbottom.jpg);
background-repeat: repeat-x;
background-position: bottom;
background-attachment: fixed;
}
#wrapper {
width: 900px;
margin-right: auto;
margin-left: auto;
padding-top: 15px;
}
#wrapper #header {
background-image: url(images/headerSamp1.jpg);
margin: 0px;
padding: 0px;
height: 276px;
background-repeat: no-repeat;
}
#wrapper #nav {
background-color: #FFF;
background-image: url(images/navSamp1.jpg);
background-repeat: no-repeat;
height: 60px;
width: 900px;
margin: 0px;
padding: 0px;
text-align: center;
}
#wrapper #content {
background-image: url(images/contentSamp1.jpg);
background-repeat: repeat-y;
margin: 0px;
width: 900px;
background-color: #FFF;
padding: 0px;
}
#wrapper #footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-repeat: no-repeat;
height: 79px;
background-color: #FFF;
background-image: url(images/footerSamp1.jpg);
margin: 0px;
padding: 0px;
}
#wrapper #nav ul {
margin: 0px;
list-style-type: none;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #060;
}
#wrapper #footer p {
text-align: center;
margin: 0px;
padding-top: 25px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#wrapper #nav ul li {
display: inline;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #000;
font-size: 1.2em;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
#wrapper #nav ul li.last {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#wrapper #nav ul li a:visited {
text-decoration: none;
}
#wrapper #nav ul li a:hover {
color: #000;
text-decoration: underline;
}
#wrapper #nav ul li a {
text-decoration: none;
color: #FFF;
}
#wrapper #content p {
font-family: Tahoma, Geneva, sans-serif;
font-size: 1em;
text-align: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 15px;
}
Hello All, I wanted to ask a question. I'm having trouble with spacing between two divs. Here's the site I'm working on: johnraymondonline.com/mjbfoundation/ The problem is that I'm trying to put a 20pixel margin between the bottom footer div (that contains "test test") and the div just above it. I'm not having much luck at all. I've done a clear and also have checked the divs several times to see if I've missed any. I've even put a div between with some height and that doesn't work. I'm not sure if one of the div's above it has a fixed height. Any help would be greatly appreciated! Thanks! Thanks for taking the time to read my question. The contents in my .ContentContainer are positioned differently in IE6 and FF. I want them to look like FF. What is wrong with my CSS that makes IE6 have more space on the left side of the green globe than FF? My goal is to have the 2 blue vertical lines line up. They line up in FF and IE7, but not in IE6. www.scopicdesigns.com/ZoneAll/index.htm Thanks, Brad Hi Guys I am having trouble trying to work out a bug that is creating a space between two div containers. To see what i mean click here for web page the css can be viewed here in firefox the two containers appear correctly but in internet explorer there is a 10px space between them. Could it have something to do with the background images? The div containing the login form also drops down in ie and i am convinced this is related to the main problem i am facing. Does anyone have any ideas as to what the problem is. Any help would be much appreciated! I have a bar of links at the top of the site I am doing. The person I am doing it for wants certain things up there. Well the links wrap because the spacing is all off and I can't for the life of me figure it out. alwaysprepared.org <--- You can see the links all messed up at the top. pastebin.com/bjygRLvw <-----Here is the CSS and the stuff for the bar is at around line 455 I have a top nav that is not dispersing the text across the full length. I tried word spacing but that messes up 2 of the links that are 2 words. So I though Justify would do it but it doesn't. I don't want to use spacer gifs and want to keep it text instead of graphics like the designer wants (the designer is not web savvy but I'm teaching her...). What is the best way to accomplish an evenly spaced top nav? Code: #top-nav {
position:absolute;
left:222px;
top:106px;
width:550px;
height:33px;
background: url(images/top_nav.jpg);
font-size: 11px;
}
.top_nav a:link, .top_nav a:visited, .top_nav a:link, .top_nav a:active {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
}
.top_nav a:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#808080;
text-decoration: none;
}
Code: <div id="top-nav"><div class="top_nav" align="justify" style="margin: 10px 0 0 20px;"> <a href="index.html">HOME</a> <a href="about_us.html">ABOUT US</a> <a href="dances.html">DANCES</a> <a href="services.html">SERVICES</a> <a href="parent_info.html">PARENT INFO</a> <a href="contact.html">CONTACT</a> </div></div> Test site Thanks in advance for your time! I just launched my first website and I am having a little problem with spacing, it is pretty obvious. I tried the _ hack, and I played with some padding, but I couldn't get the thing to budge in IE. the site is (psugmb.com) Please help! Thank you! ::Kyle In IE, there is a space between my div's. Can someone help me fix it? Attached is a sample htm and graphics or see he PHP Code: <div id="red" align="center"> <img src="red.gif" width="500" height="100"> </div> <div id="blue" align="center"> <img src="blue.gif" width="500" height="100"> </div> Thanks. Hi all - I've got an issue and hoping someone has an idea how to help. I'm trying to correct an alignment issue within a page only using css - without modifying the code. What I have is a DIV with a SPAN and an INPUT box inside. The INPUT box should be set at 100% and aligned to the right. However, the SPAN section causes the textbox to scoot over outside of the div. How can I set the INPUT box to 100%, and stay within the DIV? I'd like to share an image to show you what I mean, but apparently since I'm new - I cannot do that. Any help would be greatly appreciated. IE strikes again! My problem is that in ie there seems to be a space in between the main header images and the navigation. In firefox it works great. Any ideas where I might be going wrong? You can see what I mean he html: http://www.kenjones.co.za/norman/ css: http://www.kenjones.co.za/norman/styles/screen.css And it should look like this: http://www.kenjones.co.za/norman/images/norm2.jpg Hello everyone, I was wondering if someone could take a look at http://jordanmeeter.com/wp-content/themes/focus-on-content-01/style.css and tell me why on http://jordanmeeter.com/about/ there is no spacing between the two paragraphs? I've looked and looked and looked in the CSS but I can't seem to figure it out!!! Thanks, Jordan Nevermind, I fixed it. |
|||||||