|
CSS - Cosmetic Image Spacing Issue
This may actually be a css not a javascript question. Those two are so tightly coupled the distinction blurs. My apologies if it is in the wrong forum.
I adapted this social network bookmarking thing that I've seen kicking around. It uses prototype and scriptaculous that is why I am posting it here. It basically has an icon for each social network with a custom link to save the current page to the network in question. It appears on the following page http://demo.tixrus.us/calendar.php?filter=all below the calendar. The spacing is all wrong when it first renders, I want all the icons to be jam packed together. As you can see, it messes up and puts the last one at the beginning of a new row (not what I want). Now if you hide them and then click Social Networks again, they appear the way I wanted them in the first place. Is it because in the source each icon is on its own line? Code: <a href="xxxxx"><img ....../></a> <a href="yyyyy"><img ...../></a> as opposed to jam packing the codes into extremely long lines Code: <a href="xxxxx"><img ....../></a><a href="yyyyy"><img ...../></a> I remember this being an issue with most browsers many yrs ago.. I could run each row together on a huge line but it would make the code template even harder to read and maintain than it already is. So if there is some style thing I can do I would prefer to do that. The stylesheet for this stuff is at the bottom of http://demo.tixrus.us/styles/tixstyles.css I already explicitly set the height and width for the icons (they weren't previously) and that is fine but it was never the issue and it doesn't solve the spacing issue. Similar TutorialsI'm having a problem with my content div positioning in IE 6 only. The best way to show my issue would be to show you a screenshot of the issue with both IE 6 and IE 7 (see attached) IE6 is on the left and IE7 on the right. index.php Code:
<div id="main">
<div id="content">
<div class="leftColumn">
<?php include_once "includes/inc_leftColumn.php"; ?>
</div>
<div class="rightColumn">
<?php include_once "includes/inc_rightColumn.php"; ?>
</div>
<div class="middleColumn">
<?php include_once "includes/inc_index_page.php"; ?>
</div>
</div>
<div id="footer">
<?php include_once "includes/inc_footer.php"; ?>
</div>
</div>
attached stylesheet css Code: Original - css Code #content { width: 970px; height: auto; /*min-height: 500px;*/ margin: 0px 0px 0px 0px; background: url('/media/images/global_content_background.gif') repeat-y; } #content div.leftColumn{ min-height: 435px; margin-left:5px; padding:15px 15px 15px 15px; float:left; width:170px; z-index:1; text-align: left; vertical-align: text-top; background: url('/media/images/global_leftcolumn_background.gif') no-repeat; } #content div.middleColumn{ min-height: 435px; padding:15px 15px 15px 15px; float:right; width:530px; text-align: left; vertical-align: text-top; } #content div.rightColumn{ min-height: 435px; padding:15px 15px 15px 15px; margin-right:5px; float:right; width:170px; text-align: left; vertical-align: text-top; background: url('/media/images/global_rightcolumn_background.gif') no-repeat; }
I've been pounding my head on this theme. Here's what it looks like in Firefox and Safari Here's what it looks like in IE As you can see there is a spacing issue in IE. This is a theme for Vanilla which uses list tags to generate the listing of forum topics, I'm trying to stay away from altering the original structure as much as possible (which gets messy), so I use Firebug to help me build the CSS. Any ideas? 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. Hi Guys, I am having a small problem with IE, the height between <p> tags is considerably different to that of firefox. I think it is a padding problem but i am unable to crack it. The area i am referring to is the left side of the page where the two forms are and the images text. my website is here my css file can be found here Any suggestions? Theres a small spacing issue thats only coming up in opera for the navigation on this site. It seems to be only 1px, but I cant for the life of me find out where its coming from. The hover background doesn't extend all the way down, as it does in firefox/ie. I think its some issue with top:32px; in nav ul li, but I don't know what the solution is. Any help is appreciated. Demo link at www.ryancolantuono.com/test Code:
body {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
margin: 0;
padding: 0;
}
#content {
color: #555;
margin: auto;
width: 780px;
}
/* ----------------------- HEADER ----------------------- */
#top-header {
background-color: #000;
height: 20px;
color: #eee;
border-bottom: #555 solid 1px;
}
#top-header .login {
float: right;
margin: 5px 10px 0 0;
font-size: .7em;
}
#top-header .login a{
text-decoration: none;
color: #70d5d4;
}
#mid-header {
background: #222 url("../images/mid-header.png");
height: 55px;
}
#bot-header {
background: #4eaead url("../images/bot-header.png") repeat-x;
height: 105px;
}
/* ----------------------- END HEADER ----------------------- */
/* ----------------------- NAVIGATION ----------------------- */
#nav {
float: left;
margin: 0 15px 0 0;
}
#nav ul {
margin: 0;
padding: 0 70px 0 0;
display: block;
list-style: none;
}
#nav ul li {
top: 32px;
display: inline;
position: relative;
clear: both;
}
#nav ul li a {
font-size: .8em;
color: #fff;
text-decoration: none;
padding: 3px 12px 3px 12px;
}
#nav ul li a:hover {
background-color: 70d5d4;
color: #000;
-moz-border-radius: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
padding: 5px 12px 5px 12px;
}
/* ----------------------- END NAVIGATION ----------------------- */
Code: <html> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="css/main.css" media="screen"/> </head> <body> <div id="top-header"> <div class="login">Have an account? Login <a href="#">here</a>.</div> </div> <div id="mid-header"> <div id="nav"> <ul> <li><a href="#">Home</a> <li><a href="#">About Us</a> <li><a href="#">Portfolio</a> <li><a href="#">Links</a> <li><a href="#">Contact</a> </ul> </div> </div> <div id="bot-header"></div> </body> </html> Greetings, I am attempting to increase the space between the navigation links listed on the left column of this index page. fop27.org/fopnet/FPT/ I have been trying add spacing between these flash images for hours to no avail. Ideally, I would like to add approx half inch of spacing between each image to balance out the page. I have minimal knowledge of css and would greatfully appreciate any assistance. All the Best! Hi there, I am building a site which is working fine in Netscape but is not showing correctly in IE 6. The yellow line I have is not "listening" to its 10px height and there is some mystery spacing occuring around it at well....I have looked around, but can't seen to figure out what the fix is. I would really appreciate some help! Here is the .css and the link: http://www.kohlrbaby.com/vcc/boxlesson.htm body { margin: 0px 0px 30px 0px; padding: 0px 0px 0px 0px; font-family: verdana, arial, helvetica, sans-serif; color: #eee; background-color: #ffffff; text-align: center; } a { text-decoration: none; color: #eee; outline: none; font-size: 12px; } a:visited { color: #ccc; } a:active { color: #ccc; } a:hover { color: #990000; text-decoration: underline; } p { font-size: 12px; line-height: 22px; margin-top: 0px; margin-bottom: 0px; color: #000000; text-align: left; } #head { padding: 0px; margin-top: 30px; margin-bottom: 0px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ border-top: none; border-right: 1px solid #43709e; border-bottom: none; border-left: none; text-align:left; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 726px; height: 110px; } #yellowStrip{ width: 726px; background-color: #e7d77e; height: 10px;/*height is not functioning?? */ padding: 0px; } #lftBar { width: 93px; background: #43709e; float: left; } #mainBox { border-right: 1px solid #43709e; margin-top: -1px; margin-bottom: 0px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ background: #43709e; border-top: none; width: 726px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 726px; } .innerbox { padding: 30px; background-color: #ffffff; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left:93px; } #bottom { padding: 0px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ background: none; border: none; border-top: none; text-align:left; voice-family: "\"}\""; voice-family:inherit; } #bottomText{ padding: 0px; margin-top: 10px; margin-bottom: 0px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ background: none; border: none; border-top: none; text-align:center; voice-family: "\"}\""; voice-family:inherit; font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; color: #ccc; } Hi everyone, I'm a little stumped on why I'm having a wide space showing up when viewing a particular page with FF and not IE7. Take a look at the following page... http://spotabusiness.com/View-user-profile.html?user=403 Notice the big space between the profile picture and the tabbed box below it in FF. This space doesn't exist when using IE7. Thanks for any input I have a list of faculty members with a picture and bio for each entry and I am having trouble creating a consistent amount of vertical space between the entries. This is because some of the bios are shorter than the picture and some are longer, requiring me (for the shorter entries) to add <br />s to the bio to reach the end of the picture. Of course, depending on the browser and display settings, a greater or smaller number of <br />s are needed to get to the end of the picture so code that looks right on one pc does not look right on another. Here's a sample of the code I am using: Code: <h3 class="blue_title">Bob Smith</h3> <p><em><img height="141" width="120" src="images/stories/bob.jpg" alt="bob" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Math and Physics.</em><br />The quick brown fox jumped over the lazy dog. <em>Since 1999.</em></p> <br /><br /><br /> <p> </p> <h3 class="blue_title">Edgar Jones</h3> <p><em><img height="141" width="120" src="images/stories/edgar.jpg" alt="edgar" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Spanish, Greek, Latin,<br />and Latin American History.</em><br />he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog.<em>Since 2005.</em></p> <p> </p> Because the bio in the first entry is short, I need those three extra <br />s to reach the bototm of the picture (otherwise the next entry floats up and into the first). But as a result, the spacing between entries where the top entry needed <br />s looks wrong compared to other entries depending on the user's individual settings. Any sugestions for how to fix this problem? I guess I could set up a table and use different rows for each entry, but I was hoping not to need a table. Thanks. (p.s. - I am using joomla for this site but I don't think that's relevant to this question.) the 2 pages below have some general layout css issues, like too much white space above the grey line AND though they both use the same right bar (I uses a PHP include) the format is different in both. The green line is the toughest...it won't extend the height of the page. Any ideas? I attached my style sheet as well. thanks. http://bowtree.org/latest/luminaries.php http://bowtree.org/latest/index.php Trying to resolve the spacing issues when using a list. IE honors the set margin while FF appears to add much more amrgin spacing. I have tried using display:inline but when I do, I lose the haning indent. Any suggestions? So I am using tables for a specific part of a website and I'm running into a problem with how IE vs Everything else is treating the CSS for it. I have the padding and margins set to 0 for the table/cells/rows etc and this works perfectly in everything BUT.......wait for it...........wait for it........ IE where it is putting what I believe to be a 2px cellpadding which wouldn't matter except that the background color and border are different colors so it looks bad. Now the only way I've been able to solve this is by adding a 'cellspacing="0" cellpadding="0" in the HTML of the table...but this then messes things up for every OTHER browser..... Anyway around this seeing as how apparently css has no 'cellpadding or cellspacing' attribute? Hi, This renders ok in firefox but not in IE, it places extra space between the elements. Can someone correct it for me please, i cant see where im going wrong. Thanks. the CSS: Code: #menu {
margin: 0px;
padding: 0px;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
#menu ul {
border: 0px;
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
#menu ul li {
display: block;
text-align: left;
padding: 0px;
margin: 0px;
}
#menu ul li a {
border-top: none;
border-bottom: 1px solid black;
padding: 2px;
margin: 0px;
text-decoration: none;
display: block;
}
#menu a:link, #menu a:visited {
color: black;
text-decoration: none;
}
#menu a:hover, #menu a:active {
background-color: #fffed9;
}
the html: Code:
<div id="menu">
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
</ul>
</div>
plug this in and view it in ie and you'll see what i mean. I am presently new at CSS, and I need help with this little problem. Basically, I am creating a design and on Photoshop I have the following.. jerrytavares[dot]com/phpform/ex1.gif Then when I convert it into HTML i have this.. jerrytavares[dot]com/phpform/ex2.gif Now I need help spacing out the checkmark/rss image from the text. What is the best and easiest way to do this with CSS? Thanks, Peter I haven't tried this before, so if I'm way off beat, I'll take directions. What I'm trying to do is take a psd file and make a webpage from it. So far, I think I've got the images cut correctly. I tried using divs to begin with, but found I had to apply position:relative to compensate for extra spacing coming after images and divs. I'm placing an image then a div then an image. The spacing between the two are different. I've tried padding:0 and margin:0 just about everywhere I could think of putting it, but that didn't fix it. So, I used RP. But, after getting it to look right in Safari, but not Firefox [just checked before posting here], I found that making the text bigger caused the divs and images to overlap. So, I thought about tables. Yeah, same thing, so I figure I must not know something pretty basic and was wondering if anyone could help. Both pairs of files validate. Here are the links for the: div based layout and it's css file AND table based layout and it's css file Just in case this looks absolutley nuts on other browsers, here is a picture of where I'm trying to get to. I'm feeling a little tortured over this one Well, I am finishing up my portfolio website, and I am running into an issue with the footer. For the CSS for my footer I have: Code: .footer {
background-image: url('images/header-top.gif');
background-repeat: repeat-x;
background-color: #2b2f36;
width: 100%;
height: 80px;
margin-top: 900px;
color: #FFFFFF;
text-align: center;
padding-top: 30px;
}
I have to have the "margin-top" because if I don't it will automatically be set to the top, behind everything else. On Firefox, and IE7 it seems to be coming out good, only issue is with IE6. I am aware that IE6 has spacing issues, is there a simple hack or quick fix I can do? If not, what is the best solution to do this? The link to the site is www.peterbarbosa.net Thanks, Peter Look at this page http://hometown.tmhdesign.com See the right hand column, top element labeled "Quick Connections"? The icons are a bg on the containing div element that is holding an ul. I have that bg exactly where I want it in FF, but in IE7 is higher than it should be by about 5-10 pixels. I am trying but failing to get this to work. I have used a slider (bxslider)and made some changes to it so that I have my other slides visible. Then I have added a background png so that the right and left images are covered with a transparent png with around 80% opacity. Now the problem I am having is that because I have applied this image to the div it is now stopping the links being active. Can anyone help me get this right, I need the transparent png to be over the main viewport so the right and left images are not fully shown. If you view this url you will see what i mean: http://www.barryzimmerman.co.uk/new/ When you see the text for each slide, it should be an active link to the website, but because of the png it is stopping this. I really want to achieve this, so any help much appreciated. The css files are he http://www.barryzimmerman.co.uk/new/css/design.css http://www.barryzimmerman.co.uk/new/css/content.css Please help Hi, I need to create a object like in the attached image (worldmap.gif). The image itself in not hot, just the text;s above it. When the user hovers over the text, two things should happen: 1- The corresponding image should swap with a darker version (Attached: img_continent_africa.gif etc) 2- and a dropdown menu should appear as shown in worldmap.gif. My question is: How should I approach this from a css layout perespective. How do I position the over-state images. thanks, Zain I'm having another link issue. I have images in a <ul> that are links. (It's a gallery using Slimbox + Mootools). Everything looks fine in FF. However, in IE, I get these little maybe 2 or 3 pixel (width) link lines that are blue and then purple when visited. They are not on every image. In fact, my <ul> has 4 lines of six images, and the little extra pixel lines fall in the margin after the first image of every line. Here's my CSS: Code: a img {
border: 0 none;
margin: 4px 4px 10px 4px;
text-decoration: none;
}
a:hover img {
border: 1px solid #e5cb43;
margin: 3px 3px 9px 3px;
}
ul.photog {
list-style-position: outside;
padding: 0px; margin: 0px;
border: none;
background-color: #979089;
width: 850px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
li.photog {
margin: 0px;
padding: 0px;
list-style-type:none;
}
Strange thing is that I have another <ul> that uses identical code to that one and doesn't have the problem I am experiencing with this one. Any help would be greatly appreciated. Thanks in advance! |
|||||||