4 replies [Last post]
musicmuse
musicmuse's picture
Offline
newbie
Last seen: 8 years 6 weeks ago
Timezone: GMT-4
Joined: 2012-09-08
Posts: 3
Points: 4

My new website created on Weebly.com works just fine with Safari and TenFourFoxG5 but not with Internet Explorer. I know only a very basic amount of HTML code so trying to read the code and figure out what is happening is like, well, a needle in a haystack. My website's address is
www.schermusicstudio.com.

I can also open up the HTML code editor on Weebly and paste the whole thing here if that will be easier than viewing it on View Source.

I would be very grateful for any assistance someone (smart) here could provide.

Thanks much!
Michele

//mod edit: Link urls need the protocol prefix, e.g. "http://". Fixed. ~gt

musicmuse
musicmuse's picture
Offline
newbie
Last seen: 8 years 6 weeks ago
Timezone: GMT-4
Joined: 2012-09-08
Posts: 3
Points: 4

2nd post

I decided to go ahead and paste the HTML/CSS code from the Weebly website. What is happening on IE is that the page opens gray, not white. The tabs are white but they are defined as tabs instead of the grey lettering floating on the white top banner. Also, the gray side borders are not there as the whole page is gray. My logo which has a white background looks horrible against the gray, creating a white square. I know that if the code isn't very specific, a browser can interpret it with too much leeway creating problems. Strangely, when my website initially opens, even on Safari or TenFourFoxG5, it flashes gray then quickly fills in the white body. I wrote to Weebly but so far I haven't received an answer on how to resolve this hence my search elsewhere.

http://csscreator.com/sites/all/modules/smileys/packs/Roving/smile.png

/* Resets
--------------------------------------------------------------------------------*/
 
* {
	padding: 0;
	margin: 0;
}
 
/* General Styling and Structure
--------------------------------------------------------------------------------*/
 
body {
	color: #333;
	background: #F5F5F5 url('bgd.gif') repeat-y scroll 50% 0;
	font: 63% Georgia, "Times New Roman", Times, serif;
	text-align: center;
}
 
.img_border {
	border: #CCCCCC 1px;
}
 
a {
	color: #1b9cce;
	text-decoration: none;
}
 
p {
	line-height: 1.5;
}
 
a:hover {
	color: #8dc919;
}
 
a img {
	border: none;
}
 
blockquote {
	font-style: italic;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #555;
	background-color: #ffffff;
	margin: 0 30px 1.5em 30px;
	padding: 0 0 0 10px;
	border-left: 1px solid #aaa;
}
 
h1,
h2,
h3 {
	font-weight: bold;
	font-family: Helvetica, Arial, sans-serif;
}
 
h1 {
	font-size: 36px;
}
 
h2 {
	font-size: 20px;
	color: #8DC919;
	background-color: #ffffff;
	padding: .3em 0;
}
 
h3 {
	font-size: 1.0em;
	text-transform: uppercase;
}
 
#container {
	width: 770px;
	margin: 0 auto;
	padding-top: 15px;
}
 
#content_box {
	width: 770px;
	text-align: left;
	float: left;
	clear: both;
	line-height: 1.5;
}
 
#content_box {
	font-size: 14px;
	line-height: 1.5;
}
 
#content_box p {
	font-size: 14px;
	line-height: 1.5;
	padding: .3em 0;
}
 
.clear {
	width: 500px;
	height: 1px;
	clear: both;
}
 
#banner {
	width: 770px;
	margin: 0 0 2.0em 0;
	border-bottom: 1px solid #000;
	float: left;
	clear: both;
}
 
/* Header
--------------------------------------------------------------------------------*/
 
#logo,
#logo a {
	font-size: 35px;
	float: left;
	align: left;
	font-family: Helvetica, Arial, sans-serif;
	color: #333;
}
 
/* Header Area
-------------------------------------------------------------*/
 
#header {
	width: 100%;
	height: 90px;
	border-top: 1px solid #ccc;
}
 
#header,
#header table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
#header td {
	vertical-align: middle;
	text-align: left;
}
 
#logo {
	padding: 25px 0;
}
 
#header-right {
	padding: 0 0 0 10px;
}
 
#header-right table {
	width: 1px;
}
 
#header-right table,
#header-right .search,
#header-right .wsite-search {
	clear: right;
	float: right;
}
 
#header-right td {
	padding: 0;
}
 
/* Header header-right phone-number
--------------------------------------------------------------------------------*/
 
#header-right .phone-number .wsite-text {
	color: #555;
	font-size: 14px;
	font-weight: Arial;
	font-family: Arial;
	text-decoration: none;
	display: block;
	white-space: nowrap;
	margin: 5px 0 5px 15px;
}
 
/* Header header-right social-links
--------------------------------------------------------------------------------*/
 
#header-right .wsite-social {
	vertical-align: middle;
	margin: 5px 0 5px 10px;
}
 
#header-right .wsite-social-item {
	width: 23px;
	height: 23px;
	left: 0;
	margin: 0 0 0 3px;
}
 
#header-right .wsite-social-rss {
	background: url(rss.jpg) no-repeat;
}
 
#header-right .wsite-social-linkedin {
	background: url(link.jpg) no-repeat;
}
 
#header-right .wsite-social-facebook {
	background: url(facebook.jpg) no-repeat;
}
 
#header-right .wsite-social-twitter {
	background: url(twitter.jpg) no-repeat;
}
 
/* Header header-right search-box
--------------------------------------------------------------------------------*/
 
#header-right .wsite-search {
	width: 205px;
	margin: 5px 0 5px 15px;
}
 
#header-right .wsite-search-input {
	width: 156px;
	height: 26px;
	border: none;
	padding: 0 7px 0 7px !important;
	color: #010101;
	font-size: 12px;
	background: url(input-bg.jpg) no-repeat;
}
 
#header-right .wsite-search-button {
	position: relative;
	width: 35px;
	height: 26px;
	border: none;
	cursor: pointer;
	background: url(submit.jpg) no-repeat;
}
 
/* Navigation
--------------------------------------------------------------------------------*/
 
#nav ul {
	font-family: Arial;
	list-style: none;
	width: 770px;
	background: url('hr_dot_black.gif') repeat-x;
	padding: 1px 0 0 0;
	border-bottom: 3px solid #000;
	float: left;
	clear: both;
}
 
#nav ul li {
	padding: 0 16px 0 0;
	font: bold 1.4em Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	float: left;
}
 
#nav ul li a {
	float: left;
	height: 37px;
	line-height: 37px;
	padding: 0 12px;
	color: #838383;
	background-color: #ffffff;
	text-decoration: none;
}
 
#nav ul li a:hover,
#nav ul li#active a {
	color: #8DC919;
	background-color: #f8f8f8;
	text-decoration: none;
}
 
/* Navigation Drop-Down Menu Customization
--------------------------------------------------------------------------------*/
 
#wsite-menus .wsite-menu li a {
	border: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid #dbdbdb;
	background: #f8f8f8;
	color: #555555;
	padding: 5px 8px 5px 12px;
}
 
#wsite-menus .wsite-menu li a:hover {
	color: #fff;
	background: #999999;
}
 
/* PAGE TYPE: no-header-page
--------------------------------------------------------------------------------*/
 
.no-header-page #content_box {
	margin-top: 20px;
}
 
/* PAGE TYPE: short-header-page
--------------------------------------------------------------------------------*/
 
.short-header-page .wsite-header {
	height: 140px;
	width: 770px;
	background: url(banner-short.jpg) no-repeat;
}
 
/* PAGE TYPE: tall-header-page
--------------------------------------------------------------------------------*/
 
.tall-header-page .wsite-header {
	height: 230px;
	width: 770px;
	background: url(banner-tall.jpg) no-repeat;
}
 
/* PAGE TYPE: landing-page
--------------------------------------------------------------------------------*/
 
#bannerleft {
	float: left;
	width: 412px;
	height: 300px;
}
 
.landing-page .wsite-header {
	width: 412px;
	height: 300px;
	background: url(banner-landing.jpg) no-repeat;
}
 
#bannerright {
	float: left;
	width: 307px;
	height: 240px;
	padding: 60px 25px 0 26px;
}
 
#bannerright h2 {
	color: #8dc919;
	font-size: 26px;
	text-align: left;
	font-family: Helvetica, Arial, sans-serif;
	padding: 0 0 10px 0;
	font-weight: normal;
}
 
#bannerright p {
	color: #333;
	font-size: 14px;
	font-family: Georgia;
	text-align: left;
	line-height: 150%;
	font-weight: normal;
}
 
#bannerright .wsite-button {
	margin: 32px 0 0 0;
}
 
/* PAGE TYPE: splash-page
--------------------------------------------------------------------------------*/
 
.splash-page {
	color: #333;
	background: #F5F5F5 url(body-splashbg.jpg) top center repeat-y;
}
 
.splash-page #container {
	width: 570px;
}
 
.splash-page #content_box {
	width: 570px;
}
 
.splash-page #header {
	width: 570px;
}
 
.splash-page #inner-header {
	width: 570px;
	border-top: 1px solid #ccc;
}
 
.splash-page #banner {
	width: 570px;
}
 
.splash-page .wsite-header {
	width: 570px;
	height: 110px;
	background: url(banner-splash.jpg) no-repeat;
	border-top: 3px #000 solid;
}
 
.splash-page #footer {
	width: 570px;
}
 
/* Footer
--------------------------------------------------------------------------------*/
 
#footer {
	width: 770px;
	margin-top: 20px;
	padding: 25px 0 29px 0;
	border-top: 1px solid #ccc;
	font: 12px Helvetica, Arial, sans-serif;
	float: left;
	clear: both;
	text-align: right;
}
 
.wsite-footer {
	padding-bottom: 20px;
}
 
.wsite-footer p {
	font-size: 12px;
}
 
/* Form Customization
--------------------------------------------------------------------------------*/
 
.wsite-form-label {
	display: inline-block;
	color: #8DC91B;
	font-size: 13px;
	font-weight: bold;
	padding: .5em 0 .2em 0;
}
 
.form-radio-container {
	color: #333333;
	font-size: 13px;
	margin: 0 !important;
}
 
.wsite-form-input {
	background: #fff;
	color: #333333;
	border: 1px solid #CDCDCD;
	border-radius: 3px;
}
 
.form-select {
	width: 380px;
	color: #333333;
	background: #fff;
	border: 1px solid #CDCDCD;
	border-radius: 3px;
}
 
/* Buttons
--------------------------------------------------------------------------------*/
 
/*
  Buttons are styled with background image sprites. There are 4 unique image files:
   - small & normal-colored  (button_small_grey.png)
   - large & normal-colored  (button_large_grey.png)
   - small & highlight-colored  (button_small_orange.png)
   - large & highlight-colored  (button_large_orange.png)
 
  Each of these 4 types of buttons must define a :hover state (when user's mouse is over)
  as well as an :active state (when the user presses down).
 
  Look at the CSS (especially the inner .wsite-button-inner wrapper), as well as the
  image files to understand how the liquid-width nature of these buttons work.
 */
 
/* small */
 
.wsite-button {
	color: #fff !important;
	height: 34px;
	display: inline-block;
	font-size: 12px;
	border: none;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0 10px 0 0;
	background: url(button_small_grey.png) no-repeat 100% -105px;
	text-shadow: none !important;
	filter: none !important;
}
 
.wsite-button:hover {
	background-position: 100% -140px;
}
 
.wsite-button:active {
	background-position: 100% -175px;
}
 
.wsite-button-inner {
	color: #fff !important;
	height: 34px;
	line-height: 34px;
	display: block;
	font-size: 12px;
	font-weight: bold;
	border: none;
	text-decoration: none;
	padding: 0 10px 0 20px;
	background: url(button_small_grey.png) no-repeat 0 0;
	font-family: Helvetica, Arial, sans-serif;
}
 
.wsite-button:hover .wsite-button-inner {
	background-position: 0 -35px;
}
 
.wsite-button:active .wsite-button-inner {
	background-position: 0 -70px;
}
 
/* large */
 
.wsite-button-large {
	height: 41px;
	background: url(button_large_grey.png) no-repeat 100% -126px;
	padding: 0 10px 0 0;
}
 
.wsite-button-large:hover {
	background-position: 100% -168px;
}
 
.wsite-button-large:active {
	background-position: 100% -210px;
}
 
.wsite-button-large .wsite-button-inner {
	height: 41px;
	line-height: 40px;
	padding: 1px 10px 0 20px;
	background: url(button_large_grey.png) no-repeat 0 0;
	font-family: Helvetica, Arial, sans-serif;
}
 
.wsite-button-large:hover .wsite-button-inner {
	background-position: 0 -42px;
}
 
.wsite-button-large:active .wsite-button-inner {
	background-position: 0 -84px;
}
 
/* highlight */
 
/*
Making the highlighted versions of the buttons is easy because we just need
to switch out the background images. This works because the different button
states (normal, :hover, :active) have their sprite coordinates in the same places.
*/
 
.wsite-button-large.wsite-button-highlight {
	background-image: url(button_large_green.png);
}
 
.wsite-button-large.wsite-button-highlight .wsite-button-inner {
	background-image: url(button_large_green.png);
}
 
.wsite-button-highlight {
	background-image: url(button_small_green.png);
}
 
.wsite-button-highlight .wsite-button-inner {
	background-image: url(button_small_green.png);
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 8 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Unable to replicate

The page looks the same to me in Chrome, Firefox and IE7-9.

You may want to fix this. IE can be persnickety about errors.

<link rel='stylesheet' 
      type='text/css' 
      href='http://cdn1.editmysite.com/editor/libraries/fancybox/fancybox.css?1347059372'>
</script>

Note the extraneous script closing tag.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

musicmuse
musicmuse's picture
Offline
newbie
Last seen: 8 years 6 weeks ago
Timezone: GMT-4
Joined: 2012-09-08
Posts: 3
Points: 4

Just checking...

Hi Gary,

Thanks so much for looking over the code. http://csscreator.com/sites/all/modules/smileys/packs/Roving/smile.png

Just wanted to clarify what you wrote: "The page looks the same to me in Chrome, Firefox and IE7-9." Did that mean with the problem I described as a gray page background OR did you mean that in all these browsers, it came out fine, meaning a white background (with subtle light gray side borders)?

I'll look into fixing the code you posted. I'll also forward it to Weebly.

Thank you kindly,
Michele

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 8 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

I meant a white page/content

I meant a white page/content with shadows on a light gray field; what I understand to be as you want.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.