Ant
-
Posts
202 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Downloads
Gallery
Store
Posts posted by Ant
-
-
ok. I may have figured out the problem.
Although, I can only go by what Browser Labs shows me.
I had a blank css ID and a plugin that was causing the site to break in IE.
Additionally the site will not load the top right PNG file.
I cant make it a jpg as I need it transparent.
Is there anything in that css that IE8 does not like?
Thanks,
A.
-
Currently, the site is now loading ( according to browser labs) in IE8 but it is not loading the css.
I turned off a plugin that was giving me the blank screen and repeating images. I assume it was the plugin.
How can I troubleshoot this?
I have read a bunch of stuff in searches but nothing concrete or that makes sense. I tried methodically deleting code in the header etc but couldn't find the source of the problem.
When i try and validate the page I get errors associated with table styling wanting to be set in css and most of the other stuff is coding which is part of a plugin or the theme. BUT this is a wordpress theme and the theme itself has the same errors and is validated. Also the theme itself runs fine in IE7, 8 etc.
Thanks,
A.
-
My site works fine on all comp sizes and ipads. However on the small 15" laptops in safari, some pages break layout.
The problem pages, I believe, are ones with a floated left nav AND a table to the right. I think when I used divs to the right it stays intact.
I thought reducing the width of the table would help, but that doesn't make sense because the widths work on other computers.
I cant recreate the scenario on larger computers using the zoom out feature as it still works fine. So it has something to do with the small laptop monitors, which I don't own.
Any ideas?
Thanks,
A.
-
Thanks Eddie.
I checked the site on 2 different PC's running IE8.
Both created the weird effects I explained. I tested it in IE9 and it was fine. I also tested it in IE9 using the developer tools and chose IE8 and it was fine. BUT I don't think thats the same as viewing it on a regular IE8 version NOT using the developer tools.
But I am not sure.
I guess I will have to keep looking into this. I'll see if I can find some other PC's running straight IE8 and see what I can find out.
I also tested the site using one of those screen shot online services and it showed the weird effects in IE8 as a screenshot.
A.
-
When I view my site in IE8 some very strange things happen.
When you load the homepage the first images get repeated, distorted and get like a jitter/smear effect on them when you attempt to scroll. Then you cant see any other parts of the site as the image just repeats and then you cant see anything else if you try and scroll back up.Here's my attempt at replicating whats happening(see image)
Also sometimes it cant even load and it goes white.
Because I have a mac I have to use friends machines to see how the site looks on IE. (I still have not found a solution to previewing sites on IE on a mac, which is a pain) My brief viewing of the site on IE9 seemed ok with only a few problems.
So far firefox and safari are ok. Although I am having trouble with safari's zoom option. When you zoom out 3 times (option -) on the keyboard the navigation div(which is floated left) of the online store kicks over to the right about 20px and then kicks the content underneath. Not sure how to fix that.
I still have to pass the site through the validator, but so far most errors are table errors that should be moved to css.
I also need to clean up some other things, css etc.
Thanks,
A.
-
Thanks Ben that's what I needed.
That helps clear things.
A.
-
Ok, I got it to work, just like Andrea said.
I must have had some errors in there while trying so many different variables.
Here's the css I used:
#online_store_link{
font-size: 17px;
padding: 7px 0px 7px 7px;
background-color: #1f262e;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
margin: 0;
list-style: none;
}
#online_store_link a{
text-decoration: none;
display: block;
width: 161px;
color:#ffffff;
background-color: #1f262e;
padding: 15px 0px 15px 10px;
}
#online_store_link a:hover {
background-color: #1f262e;
color: #8bab0b;
}
I still would like to know what the difference between these 2 types of css are:
#online_store_link li{
}
OR
li #online_store_link{
}
Thanks,
A.
-
I had this (see code below) AFTER that CSS, but I am not sure it's done properly(I know it's not working thats for sure). I don't think i am grasping the difference between this:
#online_store_link li{
}
OR
li #online_store_link{
}
---------
#online_store_link{
style="font-size: 17px;
padding: 7px 0px 7px 7px;
background-color: #1f262e;
color: #ffffff;"
}
#online_store_link li {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
margin: 0;
list-style: none;
}
#online_store_link li a {
text-decoration: none;
display: block;
width: 161px;
color:#333333;
padding: 15px 10px 15px 10px;
background-color: red;
}
#online_store_link li a:hover {
background-color: #FFFFFF;
color: green;
}
---------------
Thanks,
A.
-
I'm not sure if what I need help with is "specificity" or not.
Here's a situation which always confuses me. (see code below)
I have the navigation as I want it BUT I want the FIRST li item called "Online Store"
to have a different style. So I thought if I created a class or id for that list item I could stylize it
differently than the other items. The problem is I don't know how as it is being overridden by the css class for
"sidemenu"
Any help is appreciated.
My HTML is this:
<ul class="sidemenu">
<li id="online_store_link"><a title="Online Store" href="#">Online Store</a></li>
<li><a title="Specials" href="#"><span style="color: #f03b0e;">★ Specials</span></a></li>
<li><a title="Fly Rods" href="#">Fly Rods</a></li>
<li><a title="Fly Reels" href="#">Fly Reels</a></li>
<li><a title="Fly Lines" href="#">Fly Lines</a></li>
</ul>
My CSS is this:
/*----------------store left navigation-------------*/
ul.sidemenu {
padding: 0;
margin: 0;
list-style: none;
font-family: 'Arvo', serif;
font-weight: 500;
font-size: 12px;
width: 180px;
}
ul.sidemenu li {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
margin: 0;
list-style: none;
}
ul.sidemenu li a {
text-decoration: none;
display: block;
width: 161px;
color: #333333;
padding: 15px 10px 15px 10px;
background-color: #d6dddf;
}
ul.sidemenu li a:hover {
background-color: #FFFFFF;
color: black;
}
/*----------------end store left navigation-------------*/
Thanks,
A.
-
Thanks Andrea.
Thats what I needed. I just thought there was a lot of css involved to accomplish a simple task. I guess that's the simplest way.
It's amazing how time consuming something like a simple box with text and then a link etc can be to accomplish.
A.
-
Andrea, thank you.
The errors you see, for instance, the missing b, was a test for the bg but will be removed, thank you. I omitted the b so i could turn off the styling rather than deleting the whole css until I'm sure I won't use it.
Yes this is a wp theme. I did not make it. I just stylized it to fit my needs.
Once I am set on the site I will remove the inline styling from the head and add it to the core css. Right now the theme has an option to add your own styling in the cp. I use that to overwrite the linked css core site styling so I can see the changes without screwing up the original css. I will merge them when iI am done.
I see your fix, but how do i style this part"fly line with this fly rod purchase [ $75 value"
If i do it like you have it, it will appear as a regular p tag with p tag styling. (i think)I want to set off that line of text, maybe as bold etc and have control over it with css if i decide to change styling later. There are a lot of fly rods on the site and that FREE etc line will appear multiple times. So how do I do add css styling to that line. I have control over the FREE part with the span class="free" but not over the other text.
Thanks,
A.
-
Andrea here is the page. Still major work to do.
The part starts at the green FREE box and ends at details]. My goal is to have full control over that part and implement the correct html/css. I know how to do it, I just don't know the right way and the most efficient less bloated way.
Thanks,
A.
-
Mick, thanks.
I have been learning as I go. I started off going through the w3 online info a few years ago and reading and learning as much as I can. Obviously asking questions here as well.
As I keep designing I keep learning.
My problem is I don't know how to streamline my css.
So, thats why I am asking this question. I'm looking for the best css approach to this situation without using the css incorrectly or creating css thats bloated and implemented improperly.
I could just make a class called X for the span, but I don't know if I should use the div class to my advantage somehow in this instance.
A.
-
Just tried changing the second span to a p tag, but that forces the line of text to the next line, so I guess it has to stay as a span?
So it should be a <span class="?
A.
-
I need some help on whether or not the following code is correct.
Here's the code:
--------HTML-------------
<div class="free_fly_line"><span class="free">FREE </span><span style="font-family: 'Open Sans',sans-serif; font-weight: 400; color: #000000; font-size: 15px;">fly line with this fly rod purchase [ $75 value <a title="Free Fly Line Details" href="http://mysite.com/freelineimage.jpg" target="_blank">details</a> ]</span></div>
--------CSS-------------
.free{
display: inline-block;
font-family:arial, sans-serif;
font-weight:400;
font-size: 17px;
line-height: 20px;
height: 20px;
padding: 3px 7px 4px 8px;
background-color: #818f02;
color: #ffffff;
margin:0px 5px 0px 0px;
letter-spacing:2px;
}
.free_fly_line{
I HAVE NOT ADDED ANY STYLE TO THIS CLASS YET
}
I need to know if I am using things properly to achieve the results I want. I'm also learning pretty fast that I should define EVERYTHING with css so if I need to make a change sitewide I can. As I am creating pages and each is slightly different I get lazy and just make some text say bold/italic/green but I don't define it with a class, I make it inline, thus if it keeps appearing as I develop pages and I want to change styles later I have to go back manually...Lesson learned.
In the code above I did not define this line of text with a class"fly line with this fly rod purchase [ $75 value details]" I feel like I should as it's currently a span and I don't think I have control over it in my css if I want to change it later as it keeps reappearing on lots of pages. Do I make it a p tag and then add another css style, something like this to my css and obviously get rid of the inline style in the html:
.free_fly_line p {
font-family: 'Open Sans',sans-serif;
font-weight: 400;
color: #000000;
font-size: 15px;
}
Any help is appreciated.
Thanks,
A.
-
Ben, thank you.
The problem was indeed the CMS (wordpress).
In the html view there was a return in the code but I guess for some reason, even though I though spaces and returns do not effect the code in html, it did in this instance.
A.
-
Thanks Wickham.
Is that all I need to do?
Do I just let the old links, that redirect, die out or do I need to do something else in terms of seo for the new site?
A.
-
I used firebug to see whats going on but I cannot find the problem and usually I find something I missed. I'm stumped on this one.
Thanks
A.
-
I have the following code that I cannot get to react to my css:
<div>random text</div>
<div class="line_specs"><a style="cursor: pointer;" title="tool tip" onclick="window.open('http://www.mydomain/specs.com', 'StatusBar', 'toolbar=no,resizable=no,scrollbars=yes,width=750,height=500,left=100,top=100');">
<em><strong>Line Specifications</strong></em></a></div>
No matter what I do I cannot reduce the amount of space above the word "Line Specifications".It's like there is an extra space above it.
I tried using css and effecting the "a" tag to reduce the space like so:
.line_specs a{
margin: 0px 0px 0px 0px;
}
I tried adding a p tag to the word "line specifications" but that didn't work either.
.line_specs p{
margin: 0px 0px 0px 0px;
}
If I take the code and remove all the onclick info etc and just test my css with say a simple p tag the css margin works fine.
Any help is appreciated.
Thanks
A.
-
Well it turns out I didn't need (according to godaddy) a 301 redirect.
They had me forward the old domain to the new domain in their control panel.
I am assuming it's ok to do it that way as I didn't find anything online that says a redirect is better than domain forwarding.
If thats not the case please let me know.
So now all indexed links are forwarded to the site with the new domain.
Do i need to do anything else at this point to make the transition? Do I just let the old links die out?
Thanks,
A.
-
Perfect thanks Wickham.
A.
-
Thanks Wickham.
Yes, the site, all files etc will stay the same with the exception of some of the content on the pages changing.
You said: "You don't need a .htaccess file for every file, just one for the whole hosting service."
I have an .htaccess file in the root of my server. I think there is only one.
Is that the file I make the changes to?
Should I launch the new site THEN make the changes to the .htaccess file or before? Does it matter?
I guess I don't understand how if I remove the old domain from the site and replace with the new domain how does an indexed page by a search engine know how to get redirected if it cant find the .htacces file to do the redirect if it does not reside at that address anymore. I guess thats why I thought I had to keep the old site intact for a few months until the old indexed pages were removed/trumped by the new site results from search engines.
Thanks
A.
-
I'm trying to understand my best approach to the following situation.
I have a site that will be changing it's name.
So it's currently called say mysite.com. It will become mynewsite.com.
The site itself will stay the same with the exception of a new logo, new contact info and changing any reference to the old name.
The site is hosted at godaddy along with the new and old domain name.
I want people that click all the old links indexed by search engines to be redirected to the new site url.
I have been reading about 301 redirects BUT I don't fully understand what to do.
For instance I read this link: http://webdesign.about.com/od/htaccess/ht/redirect-an-entire-site-using-htaccess.htm
Do all these 301 redirect explanations I have been reading about ASSUME I will be creating an entirely new site, new files etc somewhere thus telling me to make the 301 redirect changes to the OLD site files which I will keep live for x-amount of time. Thats what I am not understanding.
Can I keep the site files where they are, change the domain and add the 301 redirect changes to those same files or do I need to create a copy of the entire site?
I hope that made sense.
Thanks
A.
-
Thank Ben, I will try those options.
A.
Very Weird Problems In Ie8
in Beginners Web Design
Posted
Thanks Ben.
I tried that but it did not work.
Then I recreated the PNG file and it works.
All this time trying to figure it out and it must have been some problem with the original file and IE8 didn't like it.
Thanks,
A.