homepage Welcome to WebmasterWorld Guest from 54.198.224.121
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
IE text shifting bug
rimvydukas




msg:3820259
 2:57 pm on Jan 6, 2009 (gmt 0)

Hi,

I encountered text shifting bug in IE. Can you help me with this? I striped code as far as I can, tried to use zoom:1; on outer div, but I still have shifting text on hover event:( My site is at <snip>. Thanks.

[edited by: swa66 at 4:15 pm (utc) on Jan. 6, 2009]
[edit reason] No personal URLs, see ToS [/edit]

 

4css




msg:3820301
 4:02 pm on Jan 6, 2009 (gmt 0)

Hi rimvydukas

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?

Once again, welcome to WebmasterWorld!

rimvydukas




msg:3820434
 7:33 pm on Jan 6, 2009 (gmt 0)

Sorry if I did something wrong. Problem is with IE 6.x. I have not deep knowledge in CSS or page creation hacks for IE so I need your help. I tried to setup new site using "CMS made simple" and using standard template with two colums. When I saw this text shifting on hover event I striped whole code and left only essential one. I'll post it there as you striped my site:) But you can always look at my site to be able to view source code. It has only one link left:)

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.

[edited by: swa66 at 10:35 pm (utc) on Jan. 6, 2009]
[edit reason] no personal link, no copyrighted code please see ToS and forum charter [/edit]

4css




msg:3820471
 8:19 pm on Jan 6, 2009 (gmt 0)

Hi rimvydukas

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.

So, first, no worries on posting the link, and second, post the css for us to view as I believe that we will only need the css for screen. :)

rimvydukas




msg:3820492
 8:49 pm on Jan 6, 2009 (gmt 0)

4css,

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.

[edited by: swa66 at 10:31 pm (utc) on Jan. 6, 2009]
[edit reason] no links, please see ToS and forum charter [/edit]

rimvydukas




msg:3820524
 9:22 pm on Jan 6, 2009 (gmt 0)

this whole code is called with the following part of template:

----
{* 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. */

/*
#NewsPostDetailTitle {}
#NewsPostDetailHorizRule {}
#NewsPostDetailPrintLink {}
#NewsPostDetailReturnLink {}
*/
--------
I think that is all:)

4css




msg:3821038
 2:13 pm on Jan 7, 2009 (gmt 0)

/*
.NewsSummaryLink a:hover {
text-decoration: none;
color: #385C72;
}
*/

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.

I'm sure that someone with more knowledge of the template that you are using will be able to help you more with this :). Though from your description of the problem, it could be the above that I showed you which is causing the problem.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved