CSS Forum

Welcome to WebmasterWorld, Please read the Forum Charter [webmasterworld.com] which explains the posting of your url, as well as how to post your code for others to view to resolve your issue.

Posting of the code helps those who view it to see what you have going on as well as being educational to others who are having the same issues as you are.

Also, which version of IE are you having this difficulty in? Did you validate your code? And are you using a DTD on your page?

code:
------------------
<snip>
-------------------

Problem is that when I move mouse pointer over the link, whole text shifts to the left. I've heard that it is IE bug when one div is inside another, I tried various approaches to remove this bug but without any success:( So I need your help.

And sorry again if I did something wrong.

What you did, most of us who started here have done without thinking about it, and that is posting a url for help. No worries.

Just make sure you read the charter link that I provided for you.

What we need for you to do, is to post your css code. So what we will need is the css from your screen styles posted as well as the relevant (x)html code.

No worries on not being up on css as there are those that are familiar with your cms system that you are using that will be able to help you. I'm not familiar with that one so I won't be able to be of much help (best to be honest :) )

It sounds to me like your problem could be either related to a size of the fonts, or maybe a difference in size on the navigation widths. Without the code on those area's it will be difficult to tell.

As I said earlier - this page is generated with "CMS Made simple 1.5.1" and with its standard templates and css. I can post those whole css (there are I think 6 of them linked with each other) :) It would be easier to click on my link lets say using FF and using web developers toolbar to check all these css. As I can remember and css validator shows css content. Do I still need to post these whole css in here?

And once again, look at these lines from the code:
<link rel="stylesheet" type="text/css" media="screen" href="http://www.example.com/stylesheet.php?cssid=43&amp;mediatype=screen" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.example.com/stylesheet.php?cssid=31&amp;mediatype=screen" />
<link rel="stylesheet" type="text/css" href="http://www.example.com/stylesheet.php?cssid=34" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.example.com/stylesheet.php?cssid=44&amp;mediatype=screen" />
<link rel="stylesheet" type="text/css" media="print" href="http://www.example.com/stylesheet.php?cssid=30&amp;mediatype=print" />

I think that if you press on each href you'll get each css you want. As I said - its cms system and it would be hard and unwise to post whole thing in there.

Maybe one thing will help you. When I hover over link - new background color appears. I've read somewhere that this can cause IE text shifting bug. When I removed background color - there was no shifting at all. Maybe this will help you.

----
{* Start Sidebar *}
<div id="sidebar" class="hascontent">
{content block='Sidebar'}
</div>
{* End Sidebar *}
----

part of css:
-----------

div#sidebar {
float: left; /* set sidebar on the left side. Change to right to float it right instead. */
width: 26%; /* sidebar width, if you change this please also change #main margins */
display: inline; /* FIX ie doublemargin bug */
margin-left: 0;
}

/* if sidebar doesnt include menu but content add class="hascontent" */
div#sidebar.hascontent {
padding: 0 1%;
width: 24%; /* make width smaller if there's padding, or it will get too wide for the floated divs in IE */
background: #000000;
border-bottom: 1px solid #ccc;
}

and the news template:
-----
<!-- Start News Display Template -->
{if $pagecount > 1}
<p>
{if $pagenumber > 1}
{$firstpage}&nbsp;{$prevpage}&nbsp;
{/if}
{$pagetext}&nbsp;{$pagenumber}&nbsp;{$oftext}&nbsp;{$pagecount}
{if $pagenumber < $pagecount}
&nbsp;{$nextpage}&nbsp;{$lastpage}
{/if}
</p>
{/if}
{foreach from=$items item=entry}
{*
<div class="NewsSummary">

{if $entry->postdate}
<div class="NewsSummaryPostdate">
{$entry->postdate¦cms_date_format:"%Y %B %e, %H:%M"}
</div>
{/if}
*}
<div class="NewsSummaryLink">
{$entry->titlelink}
</div>
{*
<div class="NewsSummaryCategory">
{$category_label} {$entry->category}
</div>
*}
{*
{if $entry->summary}
<div class="NewsSummarySummary">
{eval var=$entry->summary}
</div>

<div class="NewsSummaryMorelink">
[{$entry->morelink}]
</div>

{else if $entry->content}

<div class="NewsSummaryContent">
{eval var=$entry->content}
</div>
{/if}
*}
{if isset($entry->extra)}
<div class="NewsSummaryExtra">
{eval var=$entry->extra}
{* {cms_module module='Uploads' mode='simpleurl' upload_id=$entry->extravalue} *}
</div>
{/if}
{if isset($entry->fields)}
{foreach from=$entry->fields item='field'}
<div class="NewsSummaryField">
{if $field->type == 'file'}
<img src="{$entry->file_location}/{$field->value}"/>
{else}
{$field->name}:&nbsp;{eval var=$field->value}
{/if}
</div>
{/foreach}
{/if}

{*</div>*}
{/foreach}
<!-- End News Display Template -->
--------

and the news css:
---------
div#news {
margin: 2em 0 1em 1em; /* margin for the entire div surrounding the news list */
border: 1px solid #000;
background: #FFE9AF;
}

div#news h2 {
line-height: 2em;
background: #fff;
}

.NewsSummary {
padding: 0.5em 0.5em 1em; /* padding for the news article summary */
margin: 0 0.5em 1em 0.5em; /* margin to the bottom of the news article summary */
border-bottom: 1px solid #ccc;
background: #A3A3A3;
}

.NewsSummaryPostdate {
font-size: 90%;
font-weight: bold;
background: #F2F2F2;
}

/*
.NewsSummaryLink a:hover {
text-decoration: none;
color: #385C72;
}
*/
.NewsSummaryLink {
font-weight: bold;
padding-top: 0.2em;
background: #F2F2F2;
}

.NewsSummaryCategory {
font-style: italic;
margin: 5px 0;
background: #F2F2F2;
}

.NewsSummaryAuthor {
font-style: italic;
padding-bottom: 0.5em;
}

.NewsSummarySummary, .NewsSummaryContent {
line-height: 140%;
background: #F2F2F2;
}

.NewsSummaryMorelink {
padding-top: 0.5em;
background: #F2F2F2;
}

#NewsPostDetailDate {
font-size: 90%;
margin-bottom: 5px;
font-weight: bold;
}

#NewsPostDetailSummary {
line-height: 150%;
}

#NewsPostDetailCategory {
font-style: italic;
border-top: 1px solid #ccc;
margin-top: 0.5em;
padding: 0.2em 0;
padding-bottom: 1.3em;
}

#NewsPostDetailContent {
margin-bottom: 15px;
line-height: 150%;
}

#NewsPostDetailAuthor {

padding-bottom: 1.5em;
font-style: italic;
}

/* to add specific style to the below divs, uncomment them. */

Do you realize that the styles for your .NewsSummaryLink a:hover is commented out? Meaning that these styles aren't able to be read by the browser.

Anytime you have these:
/*

*/

With code in between them, it means that your code is placed within a css comment and the browsers won't be able to read the code that is within them.

As I said, I'm not familiar with your template, but I would suggest removing the forward slash, has mark and the backward slash and hash mark from the code to see if this is causing the problem.