Solved

CSS, undesired line break

Posted on 2014-07-28
10
174 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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
 

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

792 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