Display problems FF / IE

hottentot
(@hottentot)

15 years, 6 months ago

Before I explain my problem, I better warn that I am somewhat of a novice to WordPress and coding in general. This is my first attempt to try make a site. So bear in mind that my problems may stem from pure ignorance. I do hope that you are willing / able to help me anyway… Oh, and just to make things worse, English isn’t my frst langage.

Problem in short:
I am working on this site
I keep getting display errors either in IE or in FF (or both): Mismatching colours, alignment of graphix out of whach in one browser or the other, misplacement of the search icon.

Detailed explanation:
– I found a template that looked somewhat like what I had in mind and decided to change the picture files and colour codes. Figured it would be the easiest.
– Apart from icons there were three picture files: top, a page that loops and a footer. Top was jpg and the two others and icons were png.
– I got the colouring and graphix alignment set for all files in FF.
– IE looked awful. The colouring of the jpg and png wasn’t at all the same.
– I changed footer and page to jpg and changed that bit in code as well. That helped on the IE, but resulted in FF getting a bit crazy (magnifier icon placed wrong and alignment of the blue frames got slightly messed up).
– Since then I’ve been doing a gazillion little tweaks of the picture files to make sure that they were spot on sizewise of the original pictures in the template. This helped FF a bit so that is currently almost spot on in the frames, but now EI is distorted again.
– I have also noted that the text of the sidebar isn’t displaying the sae in FF and IE. In IE it looks like proper headlines while in FF it’s not bolded. I am not sure when this occured or even if it was always there.
– If it makes any difference I better note, that I also changed the code in the footer which was encrypted using tips I read on this forum. I had the problems before doing this change though.

I am currently working on the site, so there might be a little variation in the probems there. But I am on somewhat of a deadline so I have trouble keeping my hands to myself while waiting for more qualified help!

Thanks in advance!

/T

Viewing 9 replies - 1 through 9 (of 9 total)

(@spirk)

have you altered the css at all? that would explain the problems cross platform or maybe it was not fixed to start with. Where did you get the theme?

As for colours different compressions offer various colour tones so that maybe your problem there?

Thread Starter

hottentot

(@hottentot)

15 years, 6 months ago

Thanks for your reply Spirk.

I solved the colour issue by changing all files to the same filetype. It’s now running all png. Would you recommend a certain file type?

The only thing I have changed in the css is the colour codes.

I am thinking that there must be a problem with how the css tries to place the image files. If it’s automated and not fixed where the file is placed?

At the moment the site looks okay in my owm FF, midsection is a couple of pixels off to the right in my IE7, and in nt friend’s FF the midsection is off a few pixels to the left…

/*
Theme Name: Spectrum
Theme URI: http://www.themebin.com
Description: Trendy, fancy and  attractive wordpress theme.
Version: 1.0
Author: Santhosh. S
Author URI: santhosh.themebin.com

	By downloading and using this theme, you agree to the following terms:
    - You may NOT resell this theme.
    - You can use this theme for any purpose.
    - You can modify this theme as per your needs.

- Header image is designed by Albertine.
*/

body {
	font: 75%/150% Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	background:#19171C;
	margin: 0px;
	padding: 0px 0px 0px;
}
a {
	color: #000;
	text-decoration: underline;
}
a:visited {
	color: #000;
	text-decoration: underline;
}
a:hover {
	color: #5397a4;
	text-decoration: underline;
}

p {
	padding: 0px 0px 15px;
	margin: 0px;
}
h1 {
	margin:0px;
	padding-left: 20px;
	height: 60px;
	font: bold 36px/100% "Trebuchet MS", Tahoma, Arial;
	color: #fff;
}
h1 a, h1 a:visited{
	color: #fff;
	text-decoration: none;
}
h1 a:hover{
	color: #a4dfed;
	text-decoration: none;
}
h2 {
	color: #19171C
	margin: 0px 0px 2px;
	border-bottom: 1px dotted #19171C;
	background: url(images/ch1-bg.png) left no-repeat;
	font: normal 190%/100% Tahoma, Verdana, 'Trebuchet MS', Sans-serif;
	padding-bottom: 3px;
	padding-left: 24px;
}
h2 a, h2 a:visited {
	color: #19171C;
	text-decoration: none;
}
h2 a:hover {
	color: #5397a4;
	text-decoration: none;
}
h3 {
	font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
	color: #4c69d0;
	margin: 10px 0px 5px;
}
h4 {
	font: normal 130%/100% "Trebuchet MS", Tahoma, Arial;
	color: #4c69d0;
	margin: 10px 0px 5px;
}
form {
	margin:0px;
	padding:0px;
}
#page {
	margin: 0px auto;
	width: 1000px;
	background: url(images/content-bg.png) no-repeat;
}
#page-bg {
	background: url(images/page-bg.png) center repeat-y;
}
/* header area */
#header {
	height: 288px;
	position: relative;
	text-align: left;
	padding-right: 38px;
	color: #fff;
}
#headerimg {
	position: relative;
	padding: 30px 0px 0px 40px;
	height: 60px;
}
#headerimg .description{
	position: relative;
	text-align:left;
	top:0px;
	bottom: 3px;
	padding-left: 20px;
	color: #fff;
	font-size: 14px;
}
#nav {
	list-style: none;
	margin: 0px;
	position: relative;
	float:left;
	top: 150px;
	bottom: 0px;
}
#nav li {
	float: left;
	margin-left: 5px;
}
#nav .current_page_item a, #nav .current_page_item a:visited{
	color: #19171C;
	text-decoration: none;
}
#nav .page_item a{
	color: #ffffff;
	text-decoration: none;
	border-top: solid 1px #9BC4EB;
	border-left: solid 1px #9BC4EB;
	border-right: solid 1px #9BC4EB;
	padding: 5px 15px;
	font: bold 14px/100% Arial, Helvetica, sans-serif;
	display: block;
}
#nav .page_item a:hover {
	color: #a4dfed;
	border-top: solid 1px #fff;
	border-left: solid 1px #fff;
	border-right: solid 1px #fff;
}

/* content area */
#content {
	padding: 55px 15px 25px 15px;
	float: left;
	width: 65%;
	overflow: hidden;
}
.post {
	clear:both;
	padding-top: 15px;
	padding-left: 35px;
	text-align:justify;
}

.posted {
	margin: 0;
	font-size:0.9em;
	padding: 5px;
	border-bottom: 1px solid #4C69D0;
	border-top: 1px dotted #4C69D0;
	color: #000;
	text-align:right;
}
.posted a {
	color: #000;
	text-decoration: none;
}

.user {
	background: url(images/user.png) left no-repeat;
	padding-left: 16px;
	float: left;
}

.post-title {
	float: left;
	margin-left: 0px;
	width: 600px;
	padding-top: 10px;
}

.entry {
	clear: both;
	padding-top: 10px;
}
.post-cat {
	background: url(images/mini-category.gif) no-repeat;
	padding-left: 20px;
	float:left;
	font-size: 95%;
	color: #999999;
}
.post-comments {
	background: url(images/comment.png) no-repeat;
	padding-left: 20px;
	font-size: 95%;
}
.post-calendar {
	background: url(images/calendar.png) no-repeat;
	padding-left: 16px;
	margin-left: 10px;
	float: left;
}
.category {
	background: url(images/category.png) left no-repeat;
	padding-left: 16px;
	float: right;
}

blockquote {
	margin : 10px;
	padding : 0 5px 0 40px;
	color: #333;
	border-left : 3px solid #19171C;
	border-bottom: 1px dashed #19171C;
	border-top: 1px dashed #19171C;
	border-right: 1px dashed #19171C;
	background : url(images/quote.png) no-repeat 5px 5px;
}

ul, ol {
	margin : 5px 20px;
	padding : 0 20px;
	color : #000;
}

ul span, ol span {
	color : #afecfa;
}

code {
	color: #222;
	font-size: 12px;
}

.mini-add-comment {
	background: url(images/add-comment.png) no-repeat;
	padding-left: 18px;
}
.navigation {
	clear: both;
	padding: 10px 30px;
	margin-top: 10px;
}
.navigation a, .navigation a:visited {
	color: #000;
}
.previous-entries a {
	float: left;
	padding-left: 18px;
	background: url(images/mini-nav-left.png) no-repeat left center;
}
.next-entries a {
	float: right;
	padding-right: 18px;
	background: url(images/mini-nav-right.png) no-repeat right center;
}

/* comments area */
#comments, #respond {
	border-bottom: 1px dashed #4C69D0;
	padding: 10px 0 5px 0;
	clear: both;
}
.commentlist {
	margin: 10px 0px;
	padding-left: 20px;
	line-height: 130%;
}
.commentlist li{
	padding: 5px 10px;
}
.commentlist .alt {
	background: #CDDCE2;
}
.commentlist cite {
	font-weight: bold;
	font-style: normal;
	font-size: 100%;
	color: #19171C;
}
.commentlist cite a, .commentlist cite a:visited {
	color: #19171C
}
.commentlist small {
	margin-bottom: 5px;
	display: block;
	font-size: 87%;
}
#commentform {
	margin-top: 10px;
	font: 110% Arial, Helvetica, sans-serif;
}
#commentform p {
	padding: 6px 0px;
	margin: 0px;
}
#commentform label{
	color: #014156;
	font-size: 87%;
}
#commentform input{
	width: 200px;
	background:#B2CAD2;
	border: 1px solid #01445D;
	padding: 3px;
	color: #000;
	margin-top: 3px;
}
#commentform textarea{
	width: 478px;
	height: 115px;
	background:#B2CAD2;
	border: 1px solid #01445D;
	padding: 2px;
	color: #000;
	margin-top: 3px;
}

#commentform #submit{
	background: url(images/buttons.png) no-repeat;
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	border: solid 1px #333333;
	float:right;
	width: 144px;
	height: 28px;
	cursor: pointer;
}

/*sidebar */
#sidebar {
	float: right;
	padding: 20px 60px 10px 0px;
	width: 190px;
	color: #ffffff;
	overflow: hidden;
}

#sidebar img {
	border: none;
}
#sidebar h2, #sidebar .sidebartitle{
	font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
	color: #19171C;
	margin: 20px 0px 2px;
	border-bottom: 1px solid #4C69D0;
}
#sidebar a, #sidebar a:visited{
	color: #000;
	text-decoration: none;
}
#sidebar a:hover{
	color: #01445D;
	text-decoration: none;
}
#sidebar ul {
	margin: 0;
	padding: 0;
}
#sidebar ul li {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}
#sidebar ul li ul {
	padding: 0;
	margin: 0;
}
#sidebar ul li ul li{
	padding: 2px 0 2px 0px;
	border-bottom: 1px dotted #4C69D0;
}
#sidebar ul li ul li ul li{
	padding: 1px 0 1px 10px;
	border: none;
}
ul.list-blogroll li{
	padding-left: 16px;
}

li.widget_recent_comments li{
	background: url(images/mini-recent-comments.gif) no-repeat !important;
	padding-left: 20px !important;
}
li.widget_calendar td {
	padding: 3px 5px;
	color: #4C69D0;
}
.textwidget {
	padding-top: 5px;
	color: #4C69D0;
}

/* search form */

#search-form {
	position: relative;
	right: 0px;
	top: 10px;
	padding-bottom: 20px;
	height: 37px;
	width: 160px;
}
#search-form #s{
	background: none;
	height: 17px;
	width: 105px;
	margin: 6px 5px 0px 10px;
	padding: 3px 7px 2px 5px;
	color: #fff;
	border: none;
}
#search-form #search-submit {
	background: url(images/magnifier.png) no-repeat left top;
	height: 24px;
	width: 24px;
	border: none;
	text-indent: -999%;
	line-height: 1px;
	cursor: pointer;
	margin-top: 6px;
}

#searchform {
	background: #222;
	height: 17px;
	width: 60px;
	margin: 6px 5px 0px 10px;
	padding: 3px 7px 2px 5px;
	color: #5397a4;
	border: none;
}
#searchform #searchsubmit {
	height: 23px;
	width: 23px;
	border: none;
}

/* footer area */
#footer {
	clear: both;
	background: #19171C url(images/footer.png) no-repeat;
	height: 75px;
	color: #ACD7EE;
	font-size: 95%;
	line-height: 130%;
}
#footer a, #footer a:visited {
	color: #83E05E;
	text-decoration:underline;
}
#footer h4 {
	font: normal 146%/100% "Trebuchet MS", Tahoma, Arial;
	color: #9cdbfb;
	margin: 10px 0px 5px;
}

#credits {

	margin: 0px auto;
	color: #a2a2a4;

	font-size: 10px;
	background: #19171C;
	padding-bottom: 5px;
	text-align:center;
	font-size:12px;
}

#credits a, #credit a:visited {
	color: #19171C;
	text-decoration: underline;
}

/* Images */

.center {
	text-align: center;
}
img.center, img[align="center"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignleft {
	float: left;
}
img {
	border:#999 1px solid;
	padding:3px;
	}
	a img {
	border-bottom: #999999 1px solid;
}
img.alignleft, img[align="left"] {
	float:left;
	margin: 2px 10px 5px 0px;
}
.alignright {
	float: right;
}
img.alignright, img[align="right"] {
	float:right;
	margin: 2px 0px 5px 10px;
}
img.wp-smiley{
	border:none;
}
.clear {
	clear:both;
}
hr.clear {
	clear:both;
	visibility: hidden;
	margin: 0px;
	padding: 0px;
}

spirk

(@spirk)

15 years, 6 months ago

can you upload a screen shot of i.e for me please? the wife has taken the laptop to work and im mac base

Thread Starter

hottentot

(@hottentot)

15 years, 6 months ago

Okay here are links to display in different browsers

IE7

FF3

FF of unknown version

Thanks again Spirk!

spirk

(@spirk)

15 years, 6 months ago

ah yeah I see now, its pushed out by about 1px! ill look at the code now and see what i come up with

Thread Starter

hottentot

(@hottentot)

15 years, 6 months ago

I appreciate that a lot Spirk!

Strange that it’s a px to the one side in the one FF shot and to the other side in the IE shot.

spirk

(@spirk)

15 years, 6 months ago

blame microsoft i.e has its own set of rules when it comes to css and its such a pain, im just going through it all now but ill have a better look at lunch.

the template you based this on did work fine before yes?

Thread Starter

hottentot

(@hottentot)

15 years, 6 months ago

I am not sure that I ever checked it in IE. I will try install the original again and test.

Thread Starter

hottentot

(@hottentot)

15 years, 6 months ago

Argh the original template has the same problems when used on my site!

Lesson learned to check out templates in different browsers before starting to work with them.

Is there anything that can be done to keep the pictures in line? Or would I need toss the whole thing?

Leaving the original rainbow theme up for a bit, so it can be seen for reference.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Display problems FF / IE’ is closed to new replies.

Display problems FF / IE

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics