Solved

something making an image push to the right on website

Posted on 2010-11-10
10
281 Views
Last Modified: 2012-06-21
Hi

Something is making my images be pushed over to the right, and so therefore not fully display.

They are the rotating images.  Which are 601px wide and yet don't display correctly.

Any ideas?

URL attached
url.txt
0
Comment
Question by:wood1e
  • 5
  • 5
10 Comments
 
LVL 2

Expert Comment

by:jeffmowens
Comment Utility
The attachmen is invalid (just a text file to a path on your local computer).

Nonetheless, I'll try to help with the following general suggestion.  

Wrap the image in a DIV container:
<div>
<img .../>
</div>
<br clear="all"/>

You can also add the style atttribute style="text-align: left;" and align="left" to both the div container and/or the img element.  Ex:

<div style="float: left;">   or    <div align="left">    and/or   <img ... align="left">    or ... etc.
0
 

Author Comment

by:wood1e
Comment Utility
I am not sure I understand what you are saying?

What is attachmen?

I have added a container...#slider_container This has not made any change.!! :)
0
 
LVL 2

Expert Comment

by:jeffmowens
Comment Utility
Sorry, spelling error...  "attachment" (eg. your provided "url.txt" upload) is what I meant.

#slider_container is a style reference and should not be in your HTML for the element.  The elmenent would reference that style reference by id (eg. <div id="slider_container"/>

Again, it's hard to interpret since there is no source code in your upload.
0
 

Author Comment

by:wood1e
Comment Utility
Really confused now...

I have attached the CSS for the rotating images. And I have reattached the URL.txt as well.

The websites main CSS is also attached.
#slider_container {

	float: left;

	width: 601px;

	height: 227px;

}

#slider {

	float: left;

    width: 601px; /* important to be same as image width */

    height: 227px; /* important to be same as image height */

    position: relative; /* important */

	overflow: hidden; /* important */

}

#sliderContent {

    width:601px; /* important to be same as image width or wider */

    float: left;

	top: 0;

	margin-left: 0;

}

.sliderImage {

    float: left;

    position: relative;

	display: none;

}

.sliderImage div {

    position: absolute;

    padding: 0px 0px 0px 0px;

    width:601px;

    display: none;

    background-color: #000;

    color: #fff;

}

.sliderImage span, .sliderImage a, .sliderImage a:visited{color:#fff; text-decoration:none}

.clear {

	clear: both;

}







.sliderImage .bottom span{padding:0px 0px; display:block; }

.sliderImage .bottom  span.title_slider{font-size:18px; line-height:20px;}

.desc_slider{ margin-top:-15px;}

Open in new window

url.txt
main-css.txt
0
 
LVL 2

Expert Comment

by:jeffmowens
Comment Utility
Ok, the attachment to the URL to the actual live site is now correct and I see the page.  However, the banner (with the cyling photos is what I assume you are referring to) appears correct to me.

This may be a browser issue -- what browser and version are you using?  I'm using IE8.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 2

Expert Comment

by:jeffmowens
Comment Utility
I think I see the problem now.

Try replacing #slider_container with this:
#slider_container {
      float: left;
      width: 601px;
      height: 227px;
  padding: 0px;
  margin: 0px;
}
0
 

Author Comment

by:wood1e
Comment Utility
hi,
No that has made no difference :)

Although when I click on capability mode within IE8 it then displays the image over to the left as I would expect!! All very strange.
0
 
LVL 2

Accepted Solution

by:
jeffmowens earned 500 total points
Comment Utility
There's definately a problem with the padding for the UL element.

Add:
#slider_container UL {
  padding: 0px;
  margin: 0px;
}
0
 

Author Comment

by:wood1e
Comment Utility
that solved it...many thanks
0
 

Author Closing Comment

by:wood1e
Comment Utility
many thanks
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
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 receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

763 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

10 Experts available now in Live!

Get 1:1 Help Now