Help with something I've made using...

User 2146019 Photo


Registered User
58 posts

I purchased an online slider to use with a website I've made on coffee cup visual site designer and learn a little about HTML and CSS in the process. I planned on keeping the slider on my coffee cup server as a web page for easy editing and using an iframe to place it on my site which is kept on a different server. Everything has been uploaded and works but I'm having trouble with how's it's viewed on Internet explorer vs Firefox. Looks great on Firefox but looks different on ie (shows four listings using Firefox , only shows two listings in Internet explorer). I know this is a common issue but is there anyway I can alter in the code to make it look better when using ie? Also it states that this slider is responsive (but my site is not) which I'm thinking may be one of my issues, is there any way to remove this property and make it static?

Main site is duckworthproperties.com
Slider is on duckworthproperties.coffeecup.com

Thanks for any help!
Chance

User 2146019 Photo


Registered User
58 posts

Heres the stylesheet i forgot to add with my post


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff5;
color:#F4F1EA;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#F4F1EA;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}




body{ font: 12px/20px Helvetica,Arial,sans-serif; }
p{margin-bottom: 10px;
}
strong{ font-weight:bold; }
ul li{list-style:square; list-style-position:inside; }
ul ul li{ margin-left:1em; }
.content-wrapper{ overflow-x:hidden; }
.content{ margin:20px 20px; width:10000px; }
h1{ font-family: 'Yanone Kaffeesatz', sans-serif; font-size:2.7em; margin: 1em 0; }
h2{ font-family: 'Yanone Kaffeesatz', sans-serif; font-size:2.2em; margin: 1em 0; font-weight: normal; }
h3{ font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Yanone Kaffeesatz', sans-serif; font-size:1.75em; margin: 1em 0; font-weight: normal; }
h4{ font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Yanone Kaffeesatz', sans-serif; font-size:1.25em; margin: 1em 0; }
h5{ font-weight:normal; font-size:1.05em; margin:0.5em 0.05em; }
h6{ font-weight:bolder; color: #F16477}
hr{ background: none repeat scroll 0 0 #DDDDDD; border: 0 none; height: 1px; }
.center { margin: 0 auto;
}

.demo-mastercon{
margin:10px 0;
background-color: none;
padding:15px 0;
border-top:1px solid rgba(0,0,0,0);
border-bottom:1px solid rgba(0,0,0,0);
box-shadow: 0 0 1px 1px rgba(0,0,0,0) inset;
}

@media only screen and (max-width: 1100px) {
.arrow-corner{ display:none;
}
}
.content-con{
margin-top:10px;
}

User 187934 Photo


Senior Advisor
20,181 posts

I see no difference between IE and FX.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2146019 Photo


Registered User
58 posts

Hmm may just be on my computer. Thats a relief! Any ideas on making the slider static versus responsive? Thanks Eric youve helped me on just about every website ive done!

User 187934 Photo


Senior Advisor
20,181 posts

Give this a try.
<div id="as1" class="advancedscroller mode-normal" style="width:760px;">

<div class="thumbsCon" style="left: 100px; width: 600px;">
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2146019 Photo


Registered User
58 posts

Great that made things work a lot better when i view it on a tablet or phone. :D It also fixed the way it was viewed on my end. Everything still looking normal on yours? Also if you have time is there anyway you could explain to me what those changes do? Im trying to learn more about this but sometimes i cant put it all together.

Thanks,
Chance

User 187934 Photo


Senior Advisor
20,181 posts

When the div has a 60% width it will always be 60% of the viewing window or containing div. Giving a fixed width with px's means it will always be that size no matter what size viewing window is being used to view it. That's how responsive sites are built. The ability has always been available but the necessity hasn't.

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2146019 Photo


Registered User
58 posts

Oh that makes sense thank you for the easy explanation, ive been reading countless books on html5 and css but they never seem to make it easy to put it all together.

User 187934 Photo


Senior Advisor
20,181 posts

You need to fix your links in the agents slider.;)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2146019 Photo


Registered User
58 posts

Yeah im still working on a pop up form that displays when the button is pressed. You may know the answer to this question as well... If i make a from pop up when that button is pressed in the iframe will it only pop up inside the iframe, or is there a way to make it pop up as one normally would on a page?


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.