Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS, undesired line break

Posted on 2014-07-28
10
Medium Priority
?
177 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Docker-Compose to Simplify Multi-Container Builds

Our veteran DevOps Author takes you through how to build a multi-container environment, managed with a single utility in order to simplify your deployments.

 
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 2000 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

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
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…
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 …

718 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