Solved

something making an image push to the right on website

Posted on 2010-11-10
10
285 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
[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
  • 5
10 Comments
 
LVL 2

Expert Comment

by:jeffmowens
ID: 34102472
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
ID: 34102518
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
ID: 34102552
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
Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

 

Author Comment

by:wood1e
ID: 34102643
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
ID: 34102687
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
 
LVL 2

Expert Comment

by:jeffmowens
ID: 34102748
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
ID: 34102769
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
ID: 34102928
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
ID: 34103063
that solved it...many thanks
0
 

Author Closing Comment

by:wood1e
ID: 34103070
many thanks
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS Style on Chrome 1 40
Passing client data from form to server 5 25
Saving Web Page as PDF 9 49
Web page design problem 3 20
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to dynamically set the form action using jQuery.

697 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