CSS - Css Messes With Links

Hi guys,

This is another standard "why won't it work in IE"-post. I'm making a multi-column news-style site (<spam>first link in my signature</spam>), and IE screws up the widths. The layout is basically three .col's which are floated left, and a #menu on the right.

Here's the relevant css:

Code:

#menu
{
    float: left;
    margin-left: 0%;
    width: 20%;
    line-height: 120%;
    padding: 2%;
    font-size: larger;
}

.col
{
    float: left;
    width: 24%;
    font-size: 0.8em;
}

.col ul{ 
    list-style-type: none; 
    padding-left: 0;
}


.col .story{
    background: #F5F8ED;
    padding: 0 ;
    margin: 1%;
    border: 1px solid #71804D;
    color: #333;
    text-align: justify;
    
}

Here's some example html:

Code:

<div class="col">
    <ul>
		<li class="story">
            <p class="story_title"> story title </p>
            <div class="story_body">
                <p>blah blah</p>
            </div>
            <div class="sub">
				<p>stuff</p>
			</div>
        </li>
	</ul>
</div>
<div class="col">
    <ul>
		<li class="story">
            <p class="story_title"> story title </p>
            <div class="story_body">
                <p>blah blah</p>
            </div>
            <div class="sub">
				<p>stuff</p>
			</div>
        </li>
	</ul>
</div>
<div class="col">
    <ul>
		<li class="story">
            <p class="story_title"> story title </p>
            <div class="story_body">
                <p>blah blah</p>
            </div>
            <div class="sub">
				<p>stuff</p>
			</div>
        </li>
	</ul>
</div>

<div id="menu">
    <div id="menu_title">
        <h1> title </h1>
    </div>

    <ul id="navbox">
        <li> ... </li>
    </ul>

    ... etc

</div>        

The problem is that IE renders the .col's very narrowly, and has some major space vertically between them. This means that #menu gets pushed down below the .col's. Can anyone point me in the right direction to fix this width issue?

Thanks,
Simon

[edit] New question, see http://forums.devshed.com/css-help-...tml#post1377956 below for details. Thanks!

--------- old question ------------

Hi, I'm trying to get some checkboxes aligned in a form that i'm creating. I can get it to work perfectly in Firefox, but not in IE6.
In Firefox:

In IE6:

I don't care so much about the height/spacing issue as much as the left/right reversal. the relevant css(i think) is here Code:

#application p {text-indent: 0px;}

#application div.col1 {width: 50%; float: left;}

#application div.col2 {width: 50%; float: right;}

#application label {
  float: left;
  width: 70px;
  text-align: right;
  height: 2em; line-height: 2em;
}

#application .label_checkbox {width: 100%;}

#application .label_checkbox p{
  clear: both;
  float: none;
  position: relative;
}

#application .label_checkbox input {
  position: absolute;
  top: 1px;
  left: 1px;
}

#application .label_checkbox label {
  display: block;
  margin-left: 22px;
  text-align: left;
  width: 160px;
}

and relevant xhtml: Code:

<div class="label_checkbox">
  <div class="col1">
    <p><input type="checkbox" id="ch" value="Classroom Helper" name="roles" /><label for="ch">Classroom Helpers</label></p>
    <p><input type="checkbox" id="lt" value="Literacy Tutor" name="roles" /><label for="lt">Literacy Tutor</label></p>
    <p><input type="checkbox" id="ta" value="Technology Assistant" name="roles" /><label for="ta">Technology Assistant</label></p>
    <p><input type="checkbox" id="ce" value="Campus Enrichment" name="roles" /><label for="ce">Campus Enrichment</label></p>
    <p><input type="checkbox" id="ote" value="One-Time Events" name="roles" /><label for="ote">One-Time Events</label></p>
  </div>
  <div class="col2">
    <p><input type="checkbox" id="frn" value="Family Reading Night" name="roles" /><label for="frn">Family Reading Night</label></p>
    <p><input type="checkbox" id="rad" value="Read Aloud Day" name="roles" /><label for="rad">Read Aloud Day</label></p>
    <p><input type="checkbox" id="dd" value="Dictionary Day" name="roles" /><label for="dd">Dictionary Day</label></p>
    <p><input type="checkbox" id="gs" value="Guest Speaker" name="roles" /><label for="gs">Guest Speaker</label></p>
    <p><input type="checkbox" id="other" value="Other" name="roles" /><label for="other">Other</label></p>
  </div>  
</div>

you can see the page at http://oaklandheroes.org/beta/application.php. Thanks for the help!

Hi all,
with your great help, the pages looks now almost fine in both IE and FF.
But, the photogallery looks much more better with all the photos bordered, like on this screenshot from FireFox. Unfornutely, when you check it in IE, all the images are messed around in a totally upredictable way (screenshot from IE). It was the same using vertical-align, but it's not so essential.

So, is there please any solution to handle this?
And is there a way how to center floating <div> within his parent <div> ("Unfortunately, there is no easy way to center floated elements." - But is there any way)? The red bordered div is floating, including all the images put in <div>, which are floating too, I'd love center the red bordered <div> inside the green bordered one. To be specific, I don't insist on the red bordered div to be floating, I just looking for a way how to center all the images inside the green bordered <div>.

Here are CSS used: Fotogalerie.css, Web.css.

Webdesign isn't really easy thing to learn , if all would work how it's supposed to work, it'd wonderful, but IE makes it all 3times harder , I really start to not to like him (more than before )

As per suggestion, I have created a new thread in this forum.
This is a follow on from my thread in the Javascript forum

I have created a table which displays exactly how I want it to.
It displays correctly in IE8, FF3.6, Opera & Chrome.
What I've done is created some Javascript to remove the last column of the table.
When this happens FF and Chrome (untested in Opera) redraws the table with the right edge column of the right-most column as I would hope it would - with the right edge style of the table as it was before the column was removed - in this instance, a solid black border.
IE does not redraw the right border like this - it retains the internal column border, in this instance, a grey dashed cell border.
I was wondering if there was a way to make IE behave?

A demo is available at geostatsireland and it is a .com - the page name is mytable.html

Take a look <link removed... no longer valid>

If you have I.E. and Firefox available... notice the differences... Take a look at the source... I.E. appears to display this "more correctly"... it's certainly more visually appealling. I want the border to go all the way around the calendar in FF (it already does in I.E.), and in FF the first week is messed up (probably has something to do with no information within the divs, but why does it do that?

Bryan

<edit>I'd also like to fix the gap on the right side between the days and the calendar border, but just making it 15% for the last one doesn't work.</edit>

Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them.


HTML
Code:

div id="bar-links">
<center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td>
</tr>
<tr>
<td background="images/barlist_02.gif" width="20"></td>
<td background="images/barlist_03.gif" width="456">&nbsp;</p>
<div id="bar-links">
<h4><a href="#" title="Riley's Pub">Riley's Pub</a>&nbsp;
<a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> &nbsp;
<a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> &nbsp;
<a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> &nbsp;
 </h4>
 </div>
</td>
<td background="images/barlist_04.gif" width="24"></td>
</tr>
<tr>
<td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td>
</tr>
</table>
</div>

CSS

Code:

#bar-links { 	text-indent:inherit; 	text-align:left; 	 }

I am not sure if these links count as navigation or not, so not sure if I should be using the UL element for semantic correctness?

<div id="footer_bottom" class="bold">

<a href="sitemap.php" title="Sitemap">Sitemap</a> |
<a href="accessibility.php" title="Accessibility Options">Accessibility Options</a> |
<a href="http://validator.w3.org/check?uri=referer;verbose=1" rel="external" title="Validate XHTML">XHTML Valid</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer" rel="external" title="Validate CSS formatting">CSS Valid</a>

</div>

I'm currently working on a website for college, but I've run into an issue I can't work out. I can't seem to get rid of the default purple box that appears around my links.

The HTML:
Code:

<div id="homelink"><a href="index.html"></a></div>

The CSS:
Code:

#homelink{
	position:absolute;
	width:53px;
	height:17px;
	margin-top:25px;
	margin-left:70px;
	z-index:10;
}

#homelink a{
	display:block;
	background-image:url(images/links/home.png);
	background-repeat:no-repeat;
	width:53px;
	height:17px;
}

#homelink a:hover{
	display:block;
	background-image:url(images/links/homehover.png);
	width:53px;
	height:17px;
}

As you can see, I use a background image for the div and no text for the link. Clicking the background image works fine and takes me to the homepage, however I get the default visited and active link border around it.

Is there any way to solve this so that no border appears?

I was messing around with <ul><li> type nav links, and had some issues with the bullet images I made were too large, so I made it as a background image for the <li> but <li> backgrounds didn't seem to work so well on IE.

My question is this, why does everyone use <ul><li> to make their nav links when you can use less code just using <a>'s within a <div>?

Here's my code example (bullet.jpg not included, it's just a 30px square I made in photoshop)

Code:

<html>
<head>
<style type="text/css">
#links li {
text-indent:40px;
list-style-type:none;
}
#links a {
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
#links2 a {
text-indent:40px;
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links2 a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
</style>
</head>

<body>
<div id="links">
	<ul>
		<li><a href="#">links</a></li>
		<li><a href="#">link 2</a></li>
		<li><a href="#">three</a></li>
	</ul>
</div>

<div id="links2">

		<a href="#">links</a>
		<a href="#">link 2</a>
		<a href="#">three</a>

</div>
</div>
</body>
</html>

My first post Website:www.freewebs.com/weareamazing

I can't figure out how to move the links that are at the top of my page (Home, Graphics, Icons, Linking Back, Credits) to the side of my table. I also want to get rid of that line that is under the links. Thank you for your help!

Hi,

I have CSS document like so:

Code:

div.menu A:link {
definitions 
}
div.menu A:visited {
definitions 
}
div.menu A:active {
definitions 
}
div.menu A:hover {
definitions
}

And in my HTML document

Code:

<div class="menu">
Links are then put in here
</div>

But only the first Link effect works, how come? I tried Google, got few results I were looking for, I know that the Link effects has to be in certain order, and in these websites I found they were in different order tried both but no luck

Thanks alot!

I have what seemed to be a simple idea but is turning out to bother me.
In my style sheet i want to put a base url followed by a user id
Link looks like this
Code:

http://mywebsite.com/this_folder/remote/html_server.php?xw_controller=hitlist&xw_action=set&target_id=

Now in my html i have this
Code:

<table><tr><td >My name<td >Job position<td >606959150</tr>

The last td that has the number in it i want to add to the end of the url posted above i cannot figure our what to put in the css to use as the main link and i want to add another td behind the last one with the number in it with the entirelink which should look like this
Code:

<a target="_blank" href="http://mywebsite.com/this_folder/remote/html_server.php?xw_controller=hitlist&xw_action=set&target_id=606959150">Link</a>

I have to use this for multiple people each one using a unique ID# is there a simple way to do this, the reasoning behind this is that the main link changes once every few months, instead of changing all links i would like to be able to just change the one in the css file and be done with it. i hope i am explaining it correctly. Thanks ahead of time for any help u can provide

I have set up a CSS file for a website I am building, however, when I click on the links which work correctly (at first) it goes to the desired place, if I go "back" the link turns to a larger italic font. Look here for example. http://www.burrellprolabs.com/newsite.htm if you click on one of the body copy links under "latestNEWS" then go back you will see what I mean.

here is my css style for that particular part:

.bodycopy {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #575757;
text-decoration: none;
line-height: 13px;
}
.bodycopy a:link {
color: #BF0000;
text-decoration: none;
}
.bodycopy a:active {
color: #BF0000;
text-decoration: none;
}
.bodycopy a:visited {
color: #BF0000;
text-decoration: none;
}
.bodycopy a:hover {
color: #969696;
text-decoration: underline;

I want to have a hover effect on the links of my page. I'm using an attached stylesheet to define it. Here is the section defining the links:

Code:

a:link {
  color: red;
  text-decoration: none;
}
a:hover {
  color: blue;
  text-decoration: underline;
}
a:visited {
  color: red;
  text-decoration: none;
}
a:active {
  color: red;
  text-decoration: underline;
}

Normal links appear red and is not underlined. When the cursor hovers over a normal link, it appears blue and is underlined.

However, visited links do not 'behave' as normal links. They appear red and are not underlined. When hovered over, they do not change color or get underlined.

I want visited links to act the same. They only way I could get them to act the same was to do the following:

Code:

a.general:link {
  color: red;
  text-decoration: none;
}
a.general:visited {
  color: red;
}
a.general:hover {
  color: blue;
  text-decoration: underline;
}
a.general:active {
  color: red;
  text-decoration: underline;
}

This is the only rules IE will obey. But every link need to be defined as instances of class "general". Is there a better way of handling this?