Solved

CSS, undesired line break

Posted on 2014-07-28
10
170 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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 

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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
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 …

707 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

13 Experts available now in Live!

Get 1:1 Help Now