|
CSS - Problem With Display:blocks;
Code:
a {
display:blocks;
width:100px;
height:20px;
border:1px solid #000000;
background:#CCCCCC;
}
This code works great in Internet Explorer, but Firefox doesn't seem to like the width and height settings. Does anyone know a way to do this in firefox? Thanks in advance! Similar TutorialsAPPEARS TO BE HASLAYOUT ISSUE IMAGE WITHIN ANCHOR NOT CLICKABLE. Hi Guys looking for a spot of help please. IE is driving me up the wall. Ive wrote a jQuery script for scrolling a list horizontally upon user clicking left or right. The list has anchors within it which are blocks which I want to be clickable with an image inside (fine in FF etc) but in IE the image within the anchor loses its ability to be clicked the rest if fine apart from I manually have to set the cursor to pointer to show the user its clickable still. Just when they click the item image within the anchor it does nothing. Here is a slim version of the HTML : Code:
<ul>
<li><a href="/page1.html"><span class="box_wrap"><span class="img"><img src="1.jpg" border="0" height="75" /></span><span>Item 1</span></span></a></li>
<li><a href="/page2.html"><span class="box_wrap"><span class="img"><img src="2.jpg" border="0" height="75" /></span><span>Item 2</span></span></a></li>
<li><a href="/page3.html"><span class="box_wrap"><span class="img"><img src="3.jpg" border="0" height="75" /></span><span>Item 3</span></span></a></li>
<li><a href="/page4.html"><span class="box_wrap"><span class="img"><img src="4.jpg" border="0" height="75" /></span><span>Item 4</span></span></a></li>
<li><a href="/page5.html"><span class="box_wrap"><span class="img"><img src="5.jpg" border="0" height="75" /></span><span>Item 5</span></span></a></li>
<li><a href="/page6.html"><span class="box_wrap"><span class="img"><img src="6.jpg" border="0" height="75" /></span><span>Item 6</span></span></a></li>
<li><a href="/page7.html"><span class="box_wrap"><span class="img"><img src="7.jpg" border="0" height="75" /></span><span>Item 7</span></span></a></li>
<li><a href="/page8.html"><span class="box_wrap"><span class="img"><img src="8.jpg" border="0" height="75" /></span><span>Item 8</span></span></a></li>
<li><a href="/page9.html"><span class="box_wrap"><span class="img"><img src="9.jpg" border="0" height="75" /></span><span>Item 9</span></span></a></li>
<li><a href="/page10.html"><span class="box_wrap"><span class="img"><img src="10.jpg" border="0" height="75" /></span><span>Item 10</span></span></a></li>
<li><a href="/page11.html"><span class="box_wrap"><span class="img"><img src="11.jpg" border="0" height="75" /></span><span>Item 11</span></span></a></li>
<li><a href="/page12.html"><span class="box_wrap"><span class="img"><img src="12.jpg" border="0" height="75" /></span><span>Item 12</span></span></a></li>
<li><a href="/page13.html"><span class="box_wrap"><span class="img"><img src="13.jpg" border="0" height="75" /></span><span>Item 13</span></span></a></li>
<li><a href="/page14.html"><span class="box_wrap"><span class="img"><img src="14.jpg" border="0" height="75" /></span><span>Item 14</span></span></a></li>
</ul>
CSS Code: Code:
ul {
width: 9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position: absolute;
top: 0;
}
ul li {
display:block;
list-style:none;
margin:0;
padding:0;
border:0;
text-align:center;
float:left;
width:118px;
height:133px;
}
ul li a{
display:block;
border-right:1px solid #e2f5fe;
outline:none;
text-decoration:none;
background:#FFF;
padding:3px 2px 3px 2px;
line-height:15px;
}
ul li a:hover{
background:#e2f5fe;
color:#fe0084;
}
ul li span.box_wrap {
display:block;
background:#FFF;
height:127px;
}
ul li span.box_wrap span{
padding:0px 3px;
font-size:12px;
}
ul li span.img {
padding:2px 0px 2px 0px;
display:block;
}
Just when you try to click any of the images within the boxes its not clickable. Really stumped. Any help or pointers would be greatly appreciated. Thanks in advance! Hi, I'm a bit confused with the relative/absolute positioning issue. I thought that relative would carry the normal flow of things, but as you can see with the code below, all of the DIV items that should follow each other are overlapping even though positioning is set to relative. Can anyone help me out as to what I am doing wrong? Thanx <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> body { padding : 0; margin-top:10px; margin-bottom:0px; background:#FFF; height: 0px; width: 0px; margin-right: 0px; margin-left: 0px; } .titleBlue{ font-family: Arial; font-size:18px; color : #003896; } .darkBlue{ font-family: Verdena; font-size:11px; color : #003896; font-weight : bold; } .smallStyle{ font-family: verdana; font-size:10px; color : #000000; text-decoration : none; } #content{ position : relative; left:50%; width:730px; margin-left:-365px; } #hrColumn{ position : absolute; top : 0; left : 0; width : 149px; border-right: 1px dotted #5D89D1; margin-right : 5px; } #hrLogo{ position : relative; top : 0; margin-bottom:5px; } #linkSection{ position : relative; margin-bottom:10px; } #columnLink{ position : relative; } #linkArrowItem{ position : absolute; top : 3px; } #linkItem{ position : absolute; left : 12px; } </style> </head> <body> <div id="content"> <div id="hrColumn"> <div id="hrLogo" class="titleBlue">Blablabla</div> <div id="linkSection" class="smallStyle"> <div id="columnLink"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">Programs and Forms</a></div> </div> <div id="columnLink"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">Development and Training</a></div> </div> <div id="columnLink" class="smallStyle"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">Careers</a></div> </div> <div id="columnLink" class="smallStyle"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">More...</a></div> </div> </div> </div> </div> </body> </html> I am creating a top nav with links that are turned into floated blocks. I have 2 issues that I can't seem to figure out. 1. How do I keep the elements from wrapping? 2. How do I make the set of floated items centered? Here is what I have so far (see code below). Because the items are floated to the left, they stay anchored to left and aren't centered. I tried giving the nav div a width. That did allow it to be centered, but I don't know what the exact width of the combined link blocks would be, so if it is too short, it wraps, and if it is too wide it doesn't center evenly. Code:
#nav{
text-align:center;
padding-top:24px;
}
#nav a{
display:block;
float:left;
padding:13px;
text-transform:uppercase;
color:#9BA047;
background:#FFF;
line-height:1em;
text-decoration:none;
font-weight:bold;
}
#nav a:hover{
color:#85231C;
}
#nav a#logo{
float:left;
padding:0px;
}
<div align="center">
<div id="nav">
<a href="/" id="logo"><img src="images/logo.gif" alt="Associated Group" border="0" /></a><a href="/about-us.html">About Us</a><a href="/exterior.html">Exterior</a><a href="/interior.html">Interior</a><a href="/display.html">Display</a><a href="/employment.html">Employment</a><a href="/location.html">Location</a><a href="/contact.html">Contact</a>
<div class="clear"></div>
</div>
</div>
I have a multi-column layout. The "main" column has text within <p> tags defined thusly:
Code: #main p {
font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
font-size: 12px;
line-height: 1.7em;
padding:0 10px;
}
Within that main columns are some <div> blocks that are arranged in a row at a certain place, define like this: Code: .mid_nav {
float:left;
width:110px;
margin:0px 10px 8px;
background:url("./images/pic_nav_bg.gif");
background-repeat: repeat-y;
}
I would like to define different qualities to the <p> tags within these <div> blocks, but the original #main p definitions seem to over-ride whatever I try. Incidently, the reason I've defined the font-size in pixels is I need uniformity between IE and FF. Any suggestions? I am using "Stylin' With CSS" book to learn how to do my website layout and I need to put some images on my website. I just need something simple... I have an image showing what I am trying to do but I can't post the url.... I basically just need to create a horizontal row of n images, n being 1 to 5. The images are very close in dimensions, but not exactly the same. How can I do this... Thanks, CD Hi, i'm almost finished with my first css design. Everything works fine as far as i tested it. But when i refresh the graphical page (broadband) or click on the broadband link when i'm on the broadband page i get a white block on the left and right side of the page. It is very strange because it disappears when you scroll down and back up. Sometimes i have to refresh a couple of times, or switch between small- and broadband to see the effect. Code: http://users.pandora.be/jef_patat/test/index.htm I have no clue at all greetings, de Jef Hi, I'm having a problem which I though should be fairly simple, but I've been hacking at it for many hours now. I want to align blocks horizontally at the bottom of a containing block. The containing block has a fixed height while the contained block do not. Here's a mockup of what I want: URL How should I modify the following code so that it renders like the above? Code: <div style="height:50px">
<div style="float:left">one</div>
<div style="float:left">two</div>
</div>
Thanks! hi, im not sure if im posting in the right page but after viewing the page source, i think its the best way to post it right here i just want to know what should i learn to make such beautiful block/tables whatever call it just like at kathymarks dot com? any suggestion what should i learn from? links? thanks! on the side note, how about the tables/blocks on deviant art? thanks for the replies! Hello. My first post at this section I'm trying to familiarize with all the positioning properties in CSS but got stuck when trying to migrate the table at the bottom of this code, to div blocks: Code:
<!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">
<head></head>
<style>
body
{
margin: 0;
padding: 0;
font-size: 90%;
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
background-color: #FFF;
color: #000;
}
table, div {
padding: 15px;
margin: 0;
background-color: #464646;
height: 30px;
width: 100%;
}
tr, div div {
color: #FFFFFF;
font-size: 18px;
height: 100%;
}
</style>
<body>
<table class="top"><tr><td>Product Name</td><td align="right">Company Name</td></tr></table>
</body>
</html>
I tried wrapping two <span> inside a <div> and float the second <span> to the right, but from what I read so far, floating is not the solution because it sets the element as a block even if it's inline. Although it works using plain old tables - btw why is IE rendering a somewhat different page then FF? - and I should follow the KISS rule I want to learn how can I make this work. Thank you a lot! I have a page that seems to display well in most browsers except in IE 6 (and possibly below). The content that should appear in the right_sidebar is shifted to the bottom left of the page. Dreamweaver has shown a "three-pixel text jog" error. I have read several articles on the IE bugs especially the ones at positioneverything.com but I still can't solve my problem. This seems to be the suggested fix, but I apparently am not applying it correctly: Code: <!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#column, #right_sidebar { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
i have some tables done on my site with the display:none property. when you make a selection from the drop-down list, that table appears. my problem is that when page refreshes all object hide again. i use a javascript case statement to display the correct selection from the drop-down box. any ideas?? Code:
<!-- #Include virtual="/webcontent/doctype.txt" -->
<html>
<head>
<!-- #Include virtual="/tagsm.htm" -->
<!-- #Include virtual="/webcontent/cssinclude.htm" -->
<title>EPIC Performance</title>
<SCRIPT LANGUAGE="JavaScript" SRC="/webcontent/nav.js">
</SCRIPT>
</head>
<body>
<div class="wrapper">
<div class="lefthandnav">
<div class="headerimgleft">
EPIC LOGO
</div>
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<a href="index.shtml">Home </a><br/>
<a href="login.asp">Log In </a><br/>
<a href="shopping.asp">Products</a><br/>
<a href="history.shtml">History</a><br/>
<a href="podcasts.shtml">Podcasts</a><br />
<a href="news.asp">News</a><br />
<a href="faq.asp">FAQ</a><br />
<a href="contact.shtm l">Contact Us</a><br/>
</div></div></div></div>
<div class="clear"> </div>
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<b>Sponsors</b><br/><br/>
<p><img src="/images/PowerLift_logo.jpg"></p>
<p><img src="/images/Uesaka_logo.jpg"></p>
</div></div></div></div>
<div class="clear"> </div>
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<b>EPIC Athletic Performance Inc.</b><br/>
P.O Box 61689<br/>
Colorado Springs, CO 80906<br/>
<b>epicindex.com</b>
</div></div></div></div>
<div class="clear"> </div>
</div>
<div class="righthandnav">
<hr class="topline"/>
<h2 class="headingtitle">Evaluate and Improve Athletic
Performance</h2>
<hr class="topline"/>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu5');">Testing</dt>
<dd id="smenu5">
<ul>
<li><a href="#">Talent Identification</a></li>
<li><a href="#">Big 33</a></li>
<li><a href="#">Test Procedures</a></li>
<li><a href="#">Test Equipment</a></li>
<li><a href="#">Test Card</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Evaluation </dt>
<dd id="smenu1">
<ul>
<li><a href="#">Five Star Rating</a></li>
<li><a href="#">Vertical Jump Index</a></li>
<li><a href="#">Talent Identification Index</a></li>
<li><a href="#">Individual Index</a></li>
<li><a href="#">Multiple Test History</a></li>
<li><a href="#">Team Data</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Goals</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Setting Goals</a></li>
<li><a href="#">Six Weeks</a></li>
<li><a href="#">High School</a></li>
<li><a href="#">College</a></li>
<li><a href="#">Pyramid Poster</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Program</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Selecting a Program</a></li>
<li><a href="#">Strength Disk</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">CD's</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Posters</a></li>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Make the Play Clinic</a></li>
<li><a href="#">Performance Speakers</a></li>
<li><a href="#">Program Equipment</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Equipment</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Program Equipment</a></li>
<li><a href="#">Testing Equipment</a></li>
<li><a href="#">Clothing</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
the problem is when you look at the website in mozilla and IE I like the way it looks in mozilla but when you look in IE the top navigation is not aligning properly there is a problem with the HR tag here is the CSS code Code:
body
{
margin: 0;
padding: 0;
font-family: arial;
color: #000;
}
.wrapper {
width: 900px;
height:605px;
}
.lefthandnav
{
float: left;
width: 145px;
background-color:white;
padding:0px 5px 0px 0px;
}
.righthandnav
{
float: left;
width: 745px;
background-color:white;
padding: 0px 0px 0px 5px
}
.headerimgleft
{
height:75px;
}
.clearing
{
clear:both;
}
.headingtitle
{
font-weight: bold;
font-size: 15;
text-align:center;
}
.topline
{
margin: 0;
padding: 0;
width:94.3%;
margin:0px;
color: #CC0000;
background-color: #CC0000;
height: 5px;
}
.bl {background: url(bl.gif) 0 100% no-repeat #e68200;}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; text-align:center;padding:5px}
.clear {font-size: 1px; height: 1px}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
padding:5px 0px 0px 0px;
}
#menu dl {
float: left;
width: 8.7em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: left;
font-weight: bold;
background: #CC0000;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: left;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
a {text-decoration: none;
color: black;
color: #222;
}
any idea why its doing like that todd Hi, I have this code and i need some text next to the drop down. I am attaching the image how it looks like the text " Hold Ctrl key 4 multiple " is next to the drop down and it sticks to the drop down i need some space between the text and drop down and its not working here is the css code The text scorlls next to the drop down and i want the space to be uniform on the 3 lines where the text scrolls down also can i have Hold Ctrl key 4 on one line and then multiple on the second line thank you princecharles Code:
.credfont
{
font-weight:bold;
font-size:12px;
padding:0px 0px 0px 4px;
color: #f00;
}
<tr class="oddrow">
<td class="lbl" width="152">Subjects: </td>
<td width="170"><span style="float:left;"><select name="Subjects" id="Subjects" multiple="multiple" size="2">
<option>Maths</option>
<option>Science</option>
<option>PT</option>
<option>Arts</option>
</select> </span> <span class="credfont">( Hold Ctrl key 4 multiple )</span>
</td>
<td class="lbl" width="92" > Class: </td>
<td colspan="2"> <input type="text" class="writein" name="class" id="class" size="30" value="">
</td>
</tr>
Hi all. I got problem with display content in IE 6 and 7, It throws the content totally on left side, while in firefox its on center, like it should be. I think problem could be he #countrydivcontainer { text-align: left; margin-top: 0pt; margin-right: auto; margin-bottom: 0pt; margin-left: auto; width: 965px; color: #666666; clear: both; padding-top: 20px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; } Unfortunately i dont know how to explain the problem without the url to really see it Can someone help? I am having CSS DIV issues with IE6. When dislayed in Firefox, IE7, IE8 it is fine, but my nice rounded boxes look like crap in IE6. I've attached a screen shot of the box as it looks in IE6 Code: <!-- CONTENT BEGIN --> <div id="box1" > <div id="lb" ><div id="rb"><div id="bb"><div id="blc"> <div id="brc"><div id="tb"><div id="tlc"><div id="trc"> <br /> <span class="style1" style="padding-left: 15px"><?php echo $Title; ?></span> <br /> <br /> </div> </div></div></div></div> </div></div></div></div> **the middle divs are all the corners for borders box1 css Code:
#box1 {
position: relative;
margin-left: 5px; margin-right: auto;
margin-top: 1em;
padding: 0;
text-align: left;
//width:100%; /* <-- use this to tie width to viewport size*/
width: 55em; /* <-- use this for a set width */
background-color: #eeeeee;;
}
I'm having some issues with website I'm putting together. Don't flame me for the code, it started as exported code from Photoshop. I need to get it up quick, after that, I'll convert it over to full CSS. http://www.foltzconstruction.com Try navigating to one of the subpages. Everything displays perfect in FF, but wrong in IE. Anyone got any clues as to why? I've attached my CSS file to make your life a little easier. Thanks, guys. I have a small problem with the login bar on my homepage. In IE it decides to pad extra space on the bottom , however in Firefox all is displayed ok. Please visit www.wecook.co.uk to see the problem. I think the problem is this bit of css Code:
#login
{
width: 736px;
background-color: #e4e2df;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
padding-top: 1px;
padding-bottom: 1px;
text-align: right;
}
label:after
{
content: ": ";
}
label
{
color: black;
font-weight: bold;
padding: 1px;
text-transform: uppercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
}
input
{
display: block;
width: 100px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
padding: 4px;
border: solid black;
border-width: 1px 2px 2px 1px;
}
.buttonLogin
{
width: 60px;
color: black;
text-transform: uppercase;
border: 1px solid #5C5C5C;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
text-align:center;
}
Offending bit of HTML Code:
<!-- If no cookies display login bar -->
<!-- start login -->
<div id = "login">
<form action="Login.do" method="post">
<table width="736" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="445" align="right"> </td>
<td width="112" align="center">
<input name="uname" type="text" id="uname" value="Username" size = "10" /> <br />
</td>
<td width="112" align = "center">
<input name="pword" type="password" id="pword" value="Password" size = "10" /> <br />
</td>
<td width="67" align = "center" valign="bottom">
<input type="submit" name="Login" value="Login" class="buttonLogin" /> </td>
</tr>
</table>
</form>
<!-- end login -->
</div>
Any help is appreciated. Thanks. I think its to do with the login button - but dont know how to fix it. the page is http://www.mostardesigns.com/fmrehabv2/ as you can see in FF it shows up right but in IE the little menu splitters on the left menu are like 10px high instead of 2px for some reason, help! thanks in advance. Here's a 1st for me. Got a problem in Firefox NOT in IE Sometimes my floated div displays under div next to it, instead of beside it. If I refresh, then it always will display correctly next to it. Realized this was a much bigger problem when I tested in Firefox on another computer and half the pages did it first time they loaded. Within my div container I have my div menu floated left with a width of 20%, then my div maincontent also floats left with a width of 78%. (I've verified there is 5-10px extra space. So the two are not stretching the entire width) Tried floating the #maincontent right, but then my footer completely screwed up and couldn't fix. Not sure what kinda change I might need to make. Any insights? Anyone else encounter this in Firefox? Thanks, James |
|||||||