|
CSS - Why Does It Line Up In Fire Fox But Not Ie?
The top image on my site lines up perfectly with the buttons in firefox but is off by a pixle in internet explorer! please help!
my site is on digitalplus.webs.com Similar TutorialsI am trying to make a site for a program I am working on and every time I program the curved box threw Fire Fox it looks good. But when IE looks at it and messes it up! Here is the site: www.bf2editor.org/Doom3Scripter Here is the CSS code: Code: alink {color: blue;}
ahover {color: red}
avisisted {color: blue}
body {background-color: black}
.curved-box
{
width: 400px;
margin: 10px;
background-color: #898989;
}
.curved-box b
{
background: #898989 url(bevel1.jpg) no-repeat left top;
color: white;
padding: 10px 20px 30px 343px;
}
.curved-box p
{
background: #898989 url(bevel2.jpg) no-repeat left bottom;
margin: 0px;
height: 20px;
padding: 1px 1px 1px 0px;
text-align: left;
}
.logo {margin-left: 6cm;}
I'm trying to make a simple style sheet that will work with firefox, I can get one to work in Internet Explorer but not in firefox. I have split up the stylesheet and tried to import it through php but when it came up, things like repeating-x or y factors didn't show up. I need some help and heres an example of my style rather simple. Code:
BODY
{
font-size: small;
margin: 5px;
color: black;
font-family: Courier New;
background-color: #f1f1f1;
}
.lcolumnt
{
background-position: right top;
background: white url(images/css_bg_lcoumn.gif) no-repeat;
font-size: small;
}
.lcum
{
background-position: right center;
background: white url(images/bg_lcoumn.gif) repeat-y;
}
TABLE
{
font-size: 11.5px;
COLOR: #000000;
font-family: Courier New;
}
INPUT
{
border-right: #a4a4a4 1px solid;
border-top: #a4a4a4 1px solid;
font-size: x-small;
border-left: #a4a4a4 1px solid;
color: #585858;
border-bottom: #a4a4a4 1px solid;
font-family: Courier New;
background-color: #f4f4f4;
}
.contentheader
{
background-position: left center;
background: url(images/main_content_header.gif) no-repeat;
}
.mctop
{
background-position: left top;
background: url(images/mc_bg_top.gif) repeat-y;
}
.mcbg
{
background-position: 0% 50%;
background: url(images/mc_main_bg.gif) repeat-y;
}
A:link
{
font-size: small;
COLOR: black;
font-family: 'Courier New';
text-decoration: none;
}
A:visited
{
font-size: small;
COLOR: gray;
font-family: 'Courier New';
text-decoration: none;
}
A:hover
{
font-weight: bold;
text-decoration: underline;
}
Hi gang, I am working on a website that is 95% complete - but I am running into one bug. The CSS code that allows the thumbnails to have an information balloon pop-up is not working on Fire Fox or Safari. I have tried everything to the best of my knowledge - but I believe it needs an expert at this point. Any suggestions you can provide would be greatly appreciated. The site is (URL address blocked: See forum rules) and the CSS file can be found at (URL address blocked: See forum rules) The clothing thumbnails on the homepage will give you an example of what is happening. Basically - the column that the thumbnail appears in expands beyond its 125 pixel constraint and blows everything to the right. How it looks in IE is how it should look in Fire Fox and Safari as well. Thanks for your time. Aloha, Ka'o I am having a problem with firefox adusting the height of two of the divs that act as containers for the inner most colums. I have the outer most container (wrapper) and an inner container (contentbox) that will not expand to the height of the inner divs. See attachment Any suggestions Here is the CSS Code:
/* -------------------------- CSS Document :: NGIT NS LAYOUT -------------------- */
.wrapper {
border: 1px solid #000000;
background-color: #b94b12;
height:auto;
width: 800px;
margin-left:80px;
margin-right:auto;
left: auto;
top: auto;
}
img {
border: 0px;
}
body {
background-color: 999999;
margin-top: 10px;
}
.navbar {
background-color: #b94b12;
position: relative;
height:auto;
width: 20%;
float: left;
clear: right;
}
.leftcolumn {
background-color: #FFFFCC;
height:auto;
width: 260px;
float: left;
clear: right;
}
.rightcolumn {
background-color: #FFFFCC;
height:auto;
width: 244px;
float: left;
clear: right;
}
.fullcolumn {
background-color: #b94b12;
width: 100%;
}
.contBox {
height:auto;
width: 800px;
margin-left: auto;
padding-top: 12px;
padding-right: 14px;
padding-bottom: 16px;
padding-left: 16px;
}
.content {
background-color: #FFFFCC;
height:auto;
width: 90%;
padding-top: 12px;
padding-right: 14px;
padding-bottom: 16px;
padding-left: 16px;
}
http://www.hybridillusions.com/wordpress/ As you see, the top menu s having issues... One Firefox is displays fine, but on IE7, it is a mess! What could be wrong? here is the location of the CSS file. I'm willing to compensate with the sell of this design, for any help on this issue. thank you. (#top-menu CSS is controlling the parts that I'm havign issues with) Ok look i want to make a dedicate for me and 5 of my freind we are in the same block. and we want a private server for 5 of our friends. so what is the command to do the ak rapid fire. tyvm. Thanks for taking the time to read my question. I am having problems with my #MenuItem a:hover in IE. I really don't know why. It refers to the left nav on the page. In IE the links at the bottm of the left nav list act funny. Place the mouse around the area between the text (the line separating the two boxes) It seems that IE is not sure which one to activate for the hover event. If that makes no sense, just move you mouse over all the links in the left nav from top to bottom and hopefully you'll see what I mean. It works fine in Fire Fox.... ya I know typical. Any suggestions? Brad Pierced is my band name. I don't have any other URL to post this under for people to view. http://www.pierced.ca/FeedProductionRecordsHelp.htm http://www.pierced.ca/FeedProductionRecordsHelp.css For a project I'm working on, for whatever reason, I cannot get that left side at the top. It appears fine in Opera 6, but in that browser, the content is far to the right. I've been dealing with this all day. Usually, I do have minor problems with getting the float right, but I usually figure it out. For the life of me, though, I cannot figure out what I'm missing. Any ideas out there? I appreciate it. Tim Trice I have this proplem on my site where it looks perfect in IE but in Fire Fox it looks like cr@p. http://www.bf2editor.org/ I want my CSS to look the same way on Fire Fox how can I fix this? This is my CSS doc Code: a:link {color: black; text-decoration: underline}
a:visited {color: black; text-decoration: underline}
input {font-size: 12px; font-weight: bold;}
body {
background-color: 000000;
margin:0;
padding:0;
line-height: 1.5em;
}
hr {color: black}
.top{
clear: left;
width: 100%;
background-image:
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
}
.top2{
clear: left;
width: 100%;
background-image:
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
}
.top3{
clear: left;
width: 100%;
background-image:
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
margin-top: -48;
}
div#news
{
background-color: E5E5E5;
width: 140px;
margin-top: 30;
margin-left: 22;
}
div#login
{
background-color: E5E5E5;
width: 140px;
margin-left: 22;
margin-top: 2;
}
div#about
{
background-color: #CCCCCC;
width: 797px;
height: 500;
margin-top: -2;
margin-left: 52;
}
div#who
{
background-color: E5E5E5;
width: 140px;
margin-left: 22;
margin-top: 2;
}
}
div#info
{
background-color: 898989;
width: 600px;
margin-top: 1cm;
margin-left: 4cm;
}
div#info h2 { background: url( bar.png ); color: #ffffff;
background-repeat: repeat-x;
}
div#p { }
/*Page Layout*/
#maincontainer{
width: 969px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 100px; /*Set left margin to LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 160px; /*Width of left column*/
height: 836px;
margin-left: -990px; /*Set left margin to -(MainContainerWidth)*/
background: #898989;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
This is one of Many issues I have with fire fox, Basically I want a list of hyperlinks with no bullets. Normally I would set list-style-type = "none" for the <uL> tag and that would be it. In fire fox, the list disappears. Also it appears that FF has issues with hyperlink in a list because even with out the style type set, the list disapears. CSS Code:
a:link {
font-family: "Bradley Hand ITC", "Monotype Corsiva";
color: #999999;
}
ul{
margin:10px;
padding: 10px;
list-style-type: none;
}
li
{
font-family: "Bradley Hand ITC", "Monotype Corsiva";
color: #999999;
}
html Code:
<div id="projects">
<h1>Projects</h1>
<P>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul></p>
</div>
Greetings, I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help! li { list-style-type: none; background: url(../images/bullet.gif) no-repeat left; padding: 0 0 0 10px; } Greetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! Thanks for taking the time to read my question I have a row of pictures as nav links, and under them I want to put a row of text stating what each link is Picture Picture Picture Picture Text Text Text Text Each pic is 52px wide, so I made the containers for the text 52px wide. both have left and right margins of 10px (I made the .NavText margin 11 to compensate for the 1px border) yet they don't line up!! What am I missing? Thanks, Brad html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="description" content="Canada Carriage - A supplier of great carriages from XXXXXXX." /> <meta name="keywords" content="Horse drawn vehicle, Carriages, Carts, Horse carriages, Horse carts, Coyaltix, Manitoba, Canada, Dealer, Equine, FEI, CDE, Combined Driving Event, Pleasure driving, Competition driving, Custom made, Fine quality, Affordable prices, European manufactured, Drive Canada" /> <meta name="Revisit-After" content="7 Days" /> <meta name="Robots" content="index, follow" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Canada Carriage</title> <link rel="stylesheet" type="text/css" href="LC.css" media="screen" /> </head> <body> <div class="MainCont"> <img class="HomeLogo" src="images/logo.jpg" /> <div class="NavHolder"> <a href="LisaClarkDesigns_About.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the About Lisa Clark Designs page." /></a> <a href="LisaClarkDesigns_Portfolio.htm"><img class="ImgNav" src="images/PortfolioNav.gif" alt="Click here to navigate to the Lisa Clark Designs Portfolio page." /></a> <a href="LisaClarkDesigns_Fees.htm"><img class="ImgNav" src="images/FeesNav.gif" alt="Click here to navigate to the Lisa Clark Designs Fees page." /></a> <a href="LisaClarkDesigns_Contact.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the Lisa Clark Designs Contact page." /></a> <div class="NavText">About</div> <div class="NavText">Portfolio</div> <div class="NavText">Fees</div> <div class="NavText">Contact</div> </div> </div> </body> </html> css Code: body {
background-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
.MainCont {
width: 800px;
margin: 0px auto;
padding: 0px;
}
img.HomeLogo {
margin-left: auto;
margin-right: auto;
margin-top: 200px;
margin-bottom: 0px;
display: block;
}
img.ImgNav {
border: 1px solid #999999;
padding: 0px;
margin: 0px 10px 0px 10px;
width: 52px;
}
.NavHolder {
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: 0px;
padding: 0px;
display: block;
width: 314px;
background-color: orange;
}
.NavText {
padding: 0px;
margin: 0px 11px 0px 11px;
width: 52px;
color: #ffffff;
font-size: 12px;
float: left;
display: inline;
background-color: red;
}
Hello, At my blog test site You'll notice the Quote: << Hello World! | Gettin' Closer >> text in the middle. Just as you see it above, I'd like that all on one line, but can't seem to figure out how to do it. Driving me nuts. Anyone? The CSS code controlling that is Code:
.alignright {
text-align: center;
display: inline;
}
.alignleft {
text-align: center;
display: inline;
}
Thanks! Chris i have a series of divs that look like this Code: <div> <div></div> <div></div> </div> <div> <div></div> <div></div> </div> Each of the inner divs use the float attribute but when it comes to the second outer div it doesnt automatically go onto the next line it sort of continues from where the last div left off. Why is this... Hi all, How to go to next line if the width of the content is more than specified width? Thanx/Chandar Hello, I use always use the <br /> tag and I just found out in using the clearing of divs like; Code: <div style="clear:both; margin-top:5px"></div> for next line or breaking of line. Is this a good thing to use? how can i keep these 2 divs i have on the same line, i tried min-width for the div they are in and it works perfect but IE doesn't support it, i even tried a extra div to use as a spacer but IE seems to make keep them on the same line even though there is already enough space for it, here is the html i'm using Code: <div id="ms_all" ><!-- Start all mapserver --> <div id="ms_main_map_div"> <input alt="Map" id="ms_main_image" type="image" name="mapa" src="map_img.phtml?[data_to_img]" /> </div> <div id="ms_side_bar" > <!-- A bunch of form stuff --> </div><!-- End Side Bar --> </div><!-- End all mapserver --> and here is the css Code: #ms_all {
/*padding:5px;*/
height:610px;
min-width:810px;
position:relative;
}
#ms_main_map_div {
padding:2px;
left:5px;
float:left;
/*top:2px;*/
width:600px;
}
#ms_main_image {
cursor:crosshair;
width:600px;
height:600px;
}
#ms_side_bar {
right:2px;
float:right;
padding-top:20px;
/*top:10px;*/
padding:2px;
width:200px;
/*clear:both;*/
}
i want the 'ms_main_map_div' and the 'ms_side_bar' to be on the same line, but the 'ms_side_bar' stuff keeps jumping to the bottom of the page if it doesn't fit in the window, so does anyone know of a way to get IE to display this the right way or maybe make IE support the min-width thing, preferably keeping my CSS and XHTML valid I heve three images - all in their own div - across the page. I want these images centered. I then want text UNDER these images. As you can see in my page, the text is actually starting to the right of my images. Why is this happening? http://69.89.31.86/~gentryfo/ Thanks. |
|||||||