CSS problem with Content Glider ( ONLY IE, REST IS ALL GOOD )

**MkChronix** · 07-29-2012, 10:47 PM

1) Script Title: Featured Content Glider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentglider.htm

3) Describe problem: Hi, I'm using this script in wordpress ( i downloaded this plugin : http://wordpress.org/extend/plugins/wp-glideshow/ , but when i check scripts this site is credited )

i already searched in the forums and tried those fix.. but they dont work.

i tried in Chrome, Firefox and Safari, and the plugin works fine, however, when i go to IE 9 ( 64 bit if it matters ) its fuxed up.. like

TITLEtext text

while in other browsers its

TITLE

text text

this is the link to the test site :

www.scsmagazine.it/wp3

in header im using :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

i hope i dont bother here, but after all if this guy made the plugin and credited you guys i guess you wont mind to help me since you're the base of this.

ah, so it either shows as "TITLEtext" or everything disappears since i guess something is misplaced. i dont know what other informations to provide, but ill be happy if someone can kindly help. thank you in advance

**jscheuer1** · 07-30-2012, 06:35 AM

It's because the links:

Ciao mondo!!

and:

Nuovo articolo 2

are floated left:

Code:

.glide_content h2 a {
float: left;
width: auto;
color: #3b3b3b;
font-size:  14px;
padding-bottom: 0px !important;
line-height: 40px;
margin-bottom: 10px;
font-weight: bold;
text-decoration: none;
}

You can either get rid of that highlighted line, or add this to your stylesheet:

Code:

.glide_content h2 { overflow: hidden; }

**MkChronix** · 07-30-2012, 10:59 AM

All this editing is making me wanna learn css more, i knew it it was a simple line of text.

One question, what do you use to check if a thing works? you just know that by looking at the CSS while using a firefox or chrome or something else browser editor?

Thank you

**jscheuer1** · 07-30-2012, 02:52 PM

All the major browsers have tools that let you get 'under the hood'. They all work similarly, yet each is slightly different. Some come with the browser, such as IE developer tools which can be invoked by hitting F12 while the tab you want to work with is in the foreground. Once you're a little familiar with these tools, they can be used to change the markup and/or styles to see a sort of 'what if?' we do this or that. It helps to be familiar with CSS though because you need that knowledge in order to guess what might be the problem and what might be the solution. Familiarity with how the browsers differ helps too, but is actually less important in a case like this.

As an example, with this one I loaded up the page in Opera, the browser I use to surf the net, read the forums, etc., just because it's the browser I was in. I saw right away that the problem existed in Opera too. That told me it was something that my knowledge of CSS standards might help solve, both Opera and IE 9 are known for being a bit more strict than other browsers.

Next I looked in Firefox to see how it was supposed to be. It looked like a float issue and by using a Firefox add on - also called developers tools (there are others available, Firefly is a favorite of many folks) I could see that the links were floated left.

Finally I loaded it in IE 9, hit F12 and removed the float. That fixed it. But I figured it was possible the float was desirable - say if there were to be other content in the H2 tag. So, knowing that making the container, in this case the H2 tag, overflow: hidden; would make more standards compliant browsers like IE 9 and Opera render it the way looser browsers like Chrome and Firefox would, I tried that, and that also worked.

But, when you have the actual page, sometimes it's easier to just look at the CSS and make changes on a local copy. I often do this anyway by making up a local mock up of the page to edit and test in the browsers. But, from my point of view, not having the actual page, it's often easier and faster to use these tools. Sometimes they're not as easy to apply to a given problem as they were in this case.

**MkChronix** · 07-30-2012, 03:30 PM

I'd like to ask you one more question, if possible.

i want to know, is it possible from CSS to make the text go on the next line after x characters? because after 100 something characters on title the plugin bugs, resulting in a blank page. i dont know wheter this is caused by the WP plugin or the script. What do you think?

Here : http://www.scsmagazine.it/wp_final/

you can see the title :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non pharetra diam.Mauris non pharetra.

if i add some more characters to it, the whole post disappears, whats the cause of this?

**jscheuer1** · 07-30-2012, 04:21 PM

Here:

Code:

.glide_content h2 a {
float: left;
width: auto;
color: #EC1D25;
font-size:  13px;
padding-bottom: 0px !important;
line-height: 40px;
margin-bottom: 10px;
font-weight: bold;
text-decoration: none;
}

Make that like 670px and it will wrap. But at that point, the line-height, which is used to get it to line up with the image, becomes a problem (too much space between lines). And technically, an a tag cannot have width anyway, unless it's display: block. So I'd suggest:

Code:

.glide_content h2 a {
float: left;
width: 670px;
color: #EC1D25;
font-size:  13px;
padding-bottom: 0px !important;
/* line-height: 40px; */
position: relative;
top: 10px;
display: block;
margin-bottom: 20px;
font-weight: bold;
text-decoration: none;
}

Works in IE 9.

**MkChronix** · 07-30-2012, 07:53 PM

Thank you it worked.. i tried everything on my own and i guess im really bad. i guess things sometimes and they work but most of the times i make huge mistakes. for example, if you see here http://www.scsmagazine.it/wp_final/

the news ticker, the images got a fix ( cause they arent supposed to be in it ) i added width=200 and they scroll well ( otherwise the script would bug because of java handling stuff or whatever it is )

but it bothers me the way it is, as in, id like to have :

#scroll-h div {
padding-top: 3px;

with 0px, this would result in a centered text, but then, since the images are part of the same thing, and im really a newbie, i tried to fix it in another way, which doesnt work, which is

<img src='//' STYLE="margin: 0px 0px 0px 0px;" width='200px' /> ~~

i guess adding the style to img didnt work cause it modifies the whole css "scroll-h div".. is there any quick fix that can center images and text that you know? if you dont want to bother looking in something that is not made from this site i wont complain, im already glad enough of the help you have given to me, so if you feel like replying ill just learn what i did wrong, if you dont, just close the topic because its resolved and its kind of going offtopic, i just didnt feel like opening a new one.

**jscheuer1** · 07-31-2012, 02:56 AM

This will get you close:

Code:

#scroll-h img {
	vertical-align: top;
}

Thread: CSS problem with Content Glider ( ONLY IE, REST IS ALL GOOD )

Thread Tools

Search Thread

CSS problem with Content Glider ( ONLY IE, REST IS ALL GOOD )

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions