image resizing to browser size css/jquery

[[email protected]]

Hello,

I’m using jquery and the cycle plugin to cycle through a few images on my homepage inside a container.When i load the website at any browser size, it seems to do the proper thing. The problems arise when i try to make the browser bigger or smaller after that, it does funky things to the images. If you begin to scale the browser when the first image is displayed, it also seems to scale properly for that first image, but goes haywire after that. It pretty much does it in all browsers and i can’t seem to figure out if it’s something im not setting properly within css or if it have something to do with jquery and the cycle plugin.

here’s the website thus far:

http://www.beaucoupla.com

this is my first time writing code so any help would be appreciated.

Code:

@charset “utf-8”;
/* CSS Document */

#mainWrapper {
/*
background:#000 right top no-repeat;
min-width:1000px;
min-height:775px;
border:0px;
background-color:#000; */
padding: 0 0 0 1px;
margin:0;
top:0;
left:0;
width:100%;
}

.mainbar {
position:absolute;
top:0px;
left:0px;
display:none;
visibility:hidden;
width:78%;
min-height:100%;
height:auto;
/*This works for IE7
min-height:775px;
height:775px;*/
border-right: #FFF solid medium;
}

#imagelist {
left:0;
position:absolute;
display:block;
visibility:visible;
/* width:auto; static size */
}

#imagelist img {
display:block;
}

#imagelist img.first {
display:block;
}

.theimage {
position:absolute;
left:0;
width:100%;
/* Adding this works for IE7 */
/* height:775px; */
border-right: solid #FFF medium;
}

#podcast {
/*right:303px; */
position:absolute;
top:0px;
left:0px;
height:100%;
}

.about_info p {
font-size:1.1em;

}

.contact_info, .about_info, .news_info {
position:relative;
margin-top:4em;
margin-left:10%;
width:78%;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:1.3em;
color:#FFF;
height:100%;
}

.contact_info #title, .about_info #title, .news_info #title {
font-size:1.75em;
padding-bottom:1.5em;
color:#1ac089;
color:#03c5d1;
}
.contact_info .heading {
color:#c04141;
font-size:1.2em;
}

.contact_info .mail {
text-decoration:underline;
}

.contact_info a:hover {
color:blue;
text-decoration:underline;
}

.news_info .heading {
color:#c04141;
}

body {
/*width:1400px;
height:775px;*/
padding:0;
margin:0;
border:0;
background-color:#000;
}

#share td {
padding-left:0.5em;
}

#share {
margin-left:1.4em;
margin-top:0;
border-top:0;
/* padding-top:5; */
font-size:0.65em;
}

.sidebar {
position:relative;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
margin-left:78%;
margin-top:1em;
font-size:2em;
color:#FFF;
}

ul {
border:0;
margin:2px;
text-decoration:none;
}

li {
list-style:none;
}

a {
text-decoration:none;
color:#FFF;
}

a.home:hover {
color:#bc7bd4;
}

a.news:hover {
color:#7bd488
}

a.podcast:hover {
color:#d47b88;
}

a.blog:hover {
color:#d4cb7b;
}

a.about:hover {
color:#7bd4c6;
}

a.contact:hover {
color:#d4a37b;
}

a.twitter:hover {
color:#33ccff;
}

a.myspace:hover {
color:#999;
}

a.facebook:hover {
color:#5b61d5;
}

[Author]

Posts