Am real stuck here. I've upload a test page to my space. (Full Version)

All Forums >> [Web Development] >> Expression Web Help



Message

paul1912005 -> Am real stuck here. I've upload a test page to my space. (11/28/2007 11:11:03)

I can get my -testpage- to display correctly in IE7 but in firefox and opera it just displays wrong.

Another problem that I am having is the wrapping style, the text moves when you shrink the browser ie or firefox or Oprea. Here is the link so you can take a look.

mysite

for get about the adverts cause the site is free-webspace.

==========================================

When editting in web-expression and using different margins the margin spacings are different in firefox and IE.

why is this?



Tailslide -> RE: Am real stuck here. I've upload a test page to my space. (11/28/2007 11:22:46)

Paul

I'm seeing the same thing in FF, Opera and IE7 - just two photos of gates....

Anyway - generally, although it might be displaying how you want in IE it's probably displaying correctly (i.e. according to your code) in Opera and Firefox.

Without being able to see what the problem actually is, to ensure cross-browser compatibility you need to do the following:

1. Use a DOCTYPE - must be the very first thing on the page (which might not be possible using free space as they tend to insert other stuff before it - if it's for a commercial site I'd get some better hosting). If you don't know which one then try HTML 4 transitional. If you don't use a full DOCTYPE or if it's not the first thing on the page then you end up relying on various browsers' error handling routines to produce your page and these routines are all different (such as IE using incorrect rules about margins and padding).

2. Use valid code. Without using proper code again you're relying on browsers to guess what you want - they might get it right, they might not. Go here to check your code: http://validator.w3.org/

3. If you're using divs for layout rather than tables (which you really should) then ensure you don't use Absolute Positioning to position them on the page - it looks like it should be easier, but it's not! Use the normal flow of the page and floats to get what you want.

In the end - if you want a site to work well cross-browser then you really need to be producing good markup/CSS (and any WYSIWYG editor is likely to NOT produce that for you without you checking it). So apart from the things above you really need to be able to understand the markup - have a look at www.htmldog.com for some excellent, easy to understand tutorials on HTML and CSS.



paul1912005 -> RE: Am real stuck here. I've upload a test page to my space. (11/28/2007 12:02:27)

Thanks for the quick reply.

Thing is I only know basic html coding and thats one of the reason I use web-expression I can check it and that. Here is a picture of how the testpage should be displayed.

[image]local://upfiles/21667/E22A3D8B8FDC4468B38A209F785D7534.jpg[/image]



Tailslide -> RE: Am real stuck here. I've upload a test page to my space. (11/28/2007 12:13:54)

Difficult to check - too many popups!!

To get two images with captions next to each other you need to have each image and caption in it's own div and then float those divs like this:
CSS in your stylesheet: 
.photofloat {float:left;width:380px;margin-right:20px;border:1px solid;}


Markup 
<div class="photofloat">
  <img src="whatever.jpg" alt="your photo" />
  <p>Your caption</p>
</div>

<div class="photofloat">
  <img src="whatever.jpg" alt="your other photo" />
  <p>Your other caption</p>
</div>


You still need a DOCTYPE etc otherwise IE will go beserk on you - and you can't put a DOCTYPE on that free hosting...



paul1912005 -> RE: Am real stuck here. I've upload a test page to my space. (11/28/2007 12:22:10)

I understand that, I am only using the freehosting site as an exsample. Will be getting my own-webspace once this is sorted out.

The doctype has fixed some issuses, but one issuse that I reall do not like is the fact that when you resize the browser window the text moves with it.

Is there any way to stop this from happing?

with your format, you have both divs under each other. Is there a way to have them side by side?



paul1912005 -> RE: Am real stuck here. I've upload a test page to my space. (11/28/2007 12:37:10)

This is just getting stupid now. Firefox isn't even showing anything on this page.

Here is the coding.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<style type="text/css">
.style1 {
margin-left: 7px;
}
.style2 {
text-align: center;
margin-left: 8px;
}
.style3 {
text-align: center;
}
</style>
</head>

<body>
This is my first web page
<br />
<br />
<div style="width: 192px; height: 101px">
<img src="" width="91" height="67" /><img src="" width="93" height="66" class="style1" /><p style="width: 93px; float: left" class="style3">
wwwww</p>
<p style="width: 88px; height: 13px; float: left" class="style2">wwww</p>
</div>
</body>
</html>



Tailslide -> RE: Am real stuck here. I've upload a test page to my space. (11/28/2007 13:14:02)

There are some errors there - a correct version of what you've written would be: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
 <title>Untitled XHTML Document</title>
<style type="text/css">
<!--
.style1 {
margin-left: 7px;
}
.style2 {
text-align: center;
margin-left: 8px;
}
.style3 {
text-align: center;
}
-->
</style>
</head>

<body>
<p>This is my first web page</p>

<div style="width: 192px; height: 101px">
<img src="" width="91" height="67" /><img src="" width="93" height="66" class="style1" /><p style="width: 93px; float: left" class="style3">

wwwww</p>
<p style="width: 88px; height: 13px; float: left" class="style2">wwww</p>
</div>
</body>
</html>



However - you've got a mix of inline styling (inside tags) and in the document head - this will make it very hard to maintain and problem-solve. Ideally you want ALL styling information in a stylesheet and NONE in the page itself.



paul1912005 -> RE: Am real stuck here. I've upload a test page to my space. (11/28/2007 13:27:54)

Even your code dosen't display correctly in firefox. It shows that theres a gap under the pictures when there is none.




mhanif -> RE: Am real stuck here. I've upload a test page to my space. (11/28/2007 13:54:41)

.



Tailslide -> RE: Am real stuck here. I've upload a test page to my space. (11/28/2007 14:13:26)


quote:

ORIGINAL: paul1912005

Even your code dosen't display correctly in firefox. It shows that theres a gap under the pictures when there is none.




It's not wrong in Firefox - all elements have margins and padding applied to them by default and these are different in different browsers. The paragraphs will have top and bottom margins so you'll have to change those to get the effect you want.

CSS: 

p {margin: 5px 0 5px 0;}


That gives a 5px top and bottom margin to the paragraph - change as required.




paul1912005 -> RE: Am real stuck here. I've upload a test page to my space. (12/2/2007 11:55:41)

Thanks for all your help guys.

I would like to ask one more question? Why do you recommend not to use absolute positioning? What about the other positioning options such as relative fixed and static?

It seems to work fine for me, even though I have to position my elements manually.



Tailslide -> RE: Am real stuck here. I've upload a test page to my space. (12/2/2007 14:47:31)

Absolute positioning has to be used carefully - you're basically removing the relationship between elements on the page which can result in areas overflowing on top of or behind other areas when people expand their browser widths or text-size.

Much better to avoid positioning as such and rely on the normal flow of the page and where necessary floating divs or other elements to position them where necessary. That way (with a little clearing of elements here and there) the elements are still connected - if done properly, elements will expand and contract without breaking.

Personally I only (generally ) use Absolute Positioning for small bits and pieces - maybe positioning a particular image somewhere or something like moving my skip links up above everything else.

AP can certainly be used for whole layouts - it's just very hard to get right and tends to fall into the category "too much like hard work!"



paul1912005 -> RE: Am real stuck here. I've upload a test page to my space. (12/6/2007 17:39:30)

A strange FireFox problem.

I have four web-browsers mainly to do testing to make sure that my page displays correctly. I have IE7 Opera Firefox and Acoo Web-Browser. All three other browsers than firefox displays this page correctly http://www.mycharacters.co.uk/Temp/gate_fittings.htm how ever in firefox the -test- word which is welcome is displayed wrong. Any idea's what I am doing wrong?

I know you guys told me not to use absoliute posistioning but not sure how else to display elements on the page. Thing that gets me is that it works in all three other web-browsers bar firefox. Even in print-priview the page displayed is correct.

Any -thoughts-?

thanks again



d a v e -> RE: Am real stuck here. I've upload a test page to my space. (12/7/2007 2:43:34)

there's no need at all to use AP on that page - just using paragraphs and tables (and divs if you need them) would mean that you would have welcome first, then the 2 tables.

isn't that simple enough?! :)

maybe you should have a look jhere in the meantime too
http://www.htmldog.com/ ;)



paul1912005 -> RE: Am real stuck here. I've upload a test page to my space. (12/8/2007 11:39:31)

That doesn't really help me much m8. I ask why is firefox displaying it incorrectly? Even if I do not use ab positioning I can't move my elements on the page even if I start a new blank-page.

I can use tables to make a page -layout- but I think tables are old and hard-work. CSS is ok but the trouble is I can't make a layout I want.

Lets say I put a div to the left hand side with a width of 300 for a side-bar. When I click on the white-space next to that div the cursor goes in to that div but I do not want it in that div. I need to put elements next to that div but not in the div. I click formart positioning and then click wrapping style left or right, that just moves it to right/left so it dosen't help me much.

How come Opera IE7 Acoo Browser displays my page correctly yet firefox dosen't?

any suggestions?



d a v e -> RE: Am real stuck here. I've upload a test page to my space. (12/8/2007 11:44:17)

type welcome and return insert your first table (no divs), press return, insert second table (no divs). how does that not work for you?



Tailslide -> RE: Am real stuck here. I've upload a test page to my space. (12/8/2007 11:46:36)

To have two sections next to each other - float two divs - one left, one right. Remember to put a width on the relevant div style rule and also if possible don't have the widths adding up to 100% width as IE can't count properly. Also you may need to add display:inline, again to counter an IE bug.

Have a look at the tutorials at www.htmldog.com and cssbasics.com to see more about how to place sections on a page with CSS.



paul1912005 -> RE: Am real stuck here. I've upload a test page to my space. (12/8/2007 11:55:56)

thanks that makes it float to the right but you have a great big gap now in web-expression. From the left div to the right. I would like the right div next to the left div.



Tailslide -> RE: Am real stuck here. I've upload a test page to my space. (12/8/2007 12:07:07)

Ok so I can't see what you've got but very roughly speaking you'd be looking at something like this:

HTML: 

<div id="container">
  <div id="header">
     Your header stuff goes here
  </div>  <!-- end header -->

  <div id="leftdiv">
    Your left hand side stuff goes here
  </div> <!-- end leftdiv -->

  <div id="rightdiv">
     Your right hand stuff  here
   </div>  <!-- end rightdiv -->
   
  <div id="footer">
      Footer stuff here
   </div> <!-- end footer -->

</div>  <!-- end container -->


CSS: 
* html, body {margin:0; padding:0;}  
body {text-align:center;}
#container {width:760px; margin:0 auto; text-align:left;}
#leftdiv {float:left; width: 49%; display:inline;}
#rightdiv {float:right; width:49%; display:inline;}
#footer {clear:both;}



Tailslide -> RE: Am real stuck here. I've upload a test page to my space. (12/8/2007 12:24:20)

I forgot - you're the one with the freespace.

You won't be able to get it looking the same cross-browser because of the issue mentioned in my earlier post (impossible to use DOCTYPE properly on this type of hosting - so all browsers are in Quirks mode therefore pretty much impossible to get behaving the same) You need some proper hosting if you want the live site to look how you want it to.



jaybee -> RE: Am real stuck here. I've upload a test page to my space. (12/8/2007 15:05:33)

Free hosting with advertising is probably the worst development environment you could choose. For heavens sake find a cheap host to use for dev and test or buy your final hosting and work with that.



paul1912005 -> RE: Am real stuck here. I've upload a test page to my space. (12/8/2007 15:30:38)

Well yeah I -gathered- that and was using it for the free space to -show- an example for the problem I was getting with web-expression. No need to point out the obveouse, which doesn't help my problem.

For your infomation I have a web-hosting but I didn't then.



paul1912005 -> RE: Am real stuck here. I've upload a test page to my space. (12/8/2007 15:34:37)

Oh and to reply to Tailslide, the problem presists when on my hard-drive and not even online.



Tailslide -> RE: Am real stuck here. I've upload a test page to my space. (12/8/2007 16:25:02)

You need to show us your code - all of it - full html page and full stylesheet that you currently have on your PC.



paul1912005 -> RE: Am real stuck here. I've upload a test page to my space. (12/8/2007 16:32:14)

its simple to create the problem I am having. Just -start- with a blank page with -doctype- etc make a table use auto format and ab. Then use a div put in ab and move it next to the table say under some text and you will have the -same- problem I am getting. My -blank- page is just a table with a div. Doing trail and error.



Tailslide -> RE: Am real stuck here. I've upload a test page to my space. (12/8/2007 16:37:38)

No we need to see your code please. Otherwise we can't help you. All of it - HTML and CSS. we're not going to start trying to recreate your page - we need to see what you've done.



paul1912005 -> RE: Am real stuck here. I've upload a test page to my space. (12/8/2007 16:43:24)

ok here it is -with- none free hosting. Just a blank page with a table. View it in different browsers.

http://www.mycharacters.co.uk/Temp/pagetest09.htm

this is a bran you page and now IE is displaying it wrong and not -firefox- weird.

This is a TEST-PAGE no point in making a -REAL- page when you get a problem with cross-browser etc.



Tailslide -> RE: Am real stuck here. I've upload a test page to my space. (12/8/2007 16:46:50)

Ah ok - thought you'd tried the float thing.



paul1912005 -> RE: Am real stuck here. I've upload a test page to my space. (12/8/2007 16:52:17)

well I have but still dosen't address the problem I am having. It only happens with tables using ab and nothing else.

With out a table in the page it displays fine.



Tailslide -> RE: Am real stuck here. I've upload a test page to my space. (12/8/2007 16:59:01)

The problem is the absolute positioning - it's too restrictive, stick with floats.

I guess I'm not helping as I keep coming back to the same problem/solution which you don't appear to be happy with so hopefully someone else might be able to give you an alternative solution that you're happier with and that solves your problem for you.

It's my bed-time so I'll say goodnight.



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.109375