Solved

CSS, undesired line break

Posted on 2014-07-28
10
172 Views
Last Modified: 2014-10-10
Please take a look at www.prowodev.com/links/q.html. You'll notice in the top left corner, there is a ticker that changes every few seconds. If you refresh the page and look closely at the ticker, you'll see that when that when the first one slides to the right, it breaks into two lines. It seems to only happen the first time; when it comes around again, it doesn't happen. You have to look closely to catch it. I've attached a screenshot to show you what it looks like. Any thoughts as to why this is happening? I've tried adding an explicit width (700px) but that didn't help. Thanks in advance for your help!
0
Comment
Question by:isaacr25
  • 5
  • 4
10 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40225300
Not sure as there is some js setting the width initially, you could add this to override it, unless I can find the js responsible

#views_slideshow_cycle_teaser_section_top_ticker-block {
    width:100% !important
}
0
 

Author Comment

by:isaacr25
ID: 40225338
That seems to have done the trick! Thanks!
0
 

Author Comment

by:isaacr25
ID: 40227403
I think I spoke too early... Is there any way to re-open this question? The line break is still happening when the ticker gets to it's right-most point (again, only on the first time). You have to refresh to see it happen each time. Can this question be re-opened?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40227421
Add

.views-slideshow-cycle-main-frame.views_slideshow_cycle_teaser_section > div {
    width: 100% !important;
}

Open in new window

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:isaacr25
ID: 40227806
Ok. That seemed to break a lot of other alignments terribly. I had to back out the code, but here is a link to a screenshot of the results: www.prowodev.com/links/image001.png.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40227818
Ok more specifity

#views_slideshow_cycle_teaser_section_top_ticker-block > div {
    width: 100% !important;
}

Open in new window

0
 

Author Comment

by:isaacr25
ID: 40229399
To make sure I'm doing the right thing, do I add that along with the previous code? So do I add both:

#views_slideshow_cycle_teaser_section_top_ticker-block > div {
    width: 100% !important;
}

Open in new window


AND

.views-slideshow-cycle-main-frame.views_slideshow_cycle_teaser_section > div {
    width: 100% !important;
}

Open in new window

0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40229406
No don't use
.views-slideshow-cycle-main-frame.views_slideshow_cycle_teaser_section > div {
    width: 100% !important;
}


The new one is more specific to the ticker box.
0
 

Author Comment

by:isaacr25
ID: 40229508
Ok, so I'm adding ONLY the following. Stay tuned. Thanks.

#views_slideshow_cycle_teaser_section_top_ticker-block > div {width: 100% !important;}

Open in new window

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
WordPress Themes 10 35
Change javascript css 1 21
Make navigation bar highlight the page you are on. 1 9
insert text field data into html script 13 30
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now