aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes HTML page including image at top leaving blank space at top Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "HTML page including image at top leaving blank space at top" Watch "HTML page including image at top leaving blank space at top" New topic
Author

HTML page including image at top leaving blank space at top

Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 663
I wrote a simple JSP page as below to include an image (for banner) at top.but blank space is coming at the top the top and as a result banner is not looking proper.

Please help me modify this simple code to remove space from the top.thanks

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61662
    
  67

Use CSS to remove all margin and padding from the body element.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 663
Thanks.I tried the below but still the same issue. What do I have to use to remove margin from top?Please advice.

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61662
    
  67

At no point did I say to add HTML attributes. I said:
Bear Bibeault wrote:Use CSS to remove all margin and padding from the body element.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 663
Ok.Please tell the name of attribute I have to add as zero padding and zero margin.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61662
    
  67

No attributes. CSS.

Properties: padding and margin.

If you are going to be writing HTML, you need to know CSS. I suggest finding a good book or tutorial and get started learning it.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 663
Thanks.I'll go by your suggestion and practice CSS in free time. However I am have to complete my current application as soon as possible. The application is complete only thing is that top space is coming above the banner.I took it as a small issue but it has taken several hours of me to resolve. I will try the step you have said.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61662
    
  67

Add the following to the head element:
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Images do not have a closing tag, they are self closing.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61662
    
  67

Eric Pascarello wrote:Images do not have a closing tag, they are self closing.

Heh. Good catch. I didn't see that in all that badly formatted code.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 663
Thanks all. In case JSPpage1 includes JSPpage2 , and both have different css, which one will take precedence in the final JSP page rendered?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61662
    
  67

Both. The browser could care less how the page was generated. It knows nothing of JSP.

The CSS will be applied according to the complex rules of CSS, which you'll need to look up.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 663
I did exactly as you said. Still got space at the top.




As suggested by you. Still could not get past this issue.








Rob Crowther
author
Ranch Hand

Joined: Nov 06, 2012
Posts: 297
    
    5

You have two line breaks (<br> elements) at the top of the <body>, these will add two lines of space. If you don't want that space, don't put the line breaks in.

Also you have an <img> and a <table> element inside the <head>, since the <head> is for content which isn't displayed it's unlikely to work the way you expect it to, it's also invalid HTML which may force browsers into some sort of quirks mode leading to yet more issues.


Read my books: Hello! HTML5 & CSS3 | HTML5 in Action | Read my blog
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 663
I did like that removed it from head and still getting space at top.






This might be a small issue but I am strugling and have wasted so much time on this. Help on this will be apreciated.

thanks
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61662
    
  67

Is this an HTML file or a JSP?

And why are you putting all that crap CSS on the image? It's the body I told you to set the margin and padding for.

And why is the style element not in the head?

And why aren't you using the HTML5 doctype?

That's all the questions for now.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 663
This is a JSP page.index.jsp

If put CSS for Body instead of Image then it will apply for all elements in body.I dont want that.I want it only for image because I dont want other elements style to be effected by this.

I have done the modifications as you suggested except for putting body because I dont want to effect other things in body by this style.
But still the same issue.
thanks

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61662
    
  67

Monica. Shiralkar wrote:If put CSS for Body instead of Image then it will apply for all elements in body.

You can listen to me or you can ignore me. If you don't listen, you will never solve your problem because the space is caused by the body. Period.

You can put any CSS you want on the image and it will not work.

I hope I have made things clear enough.

Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 663
Thanks a ton Bear. That worked perfectly. Its high time I practice css with sample projects.I was confused by the rules of css thinking if I write body there locatin of entire elements in body will get disturbed. Thanks again for your patience.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 663
It was resolved successfully using the suggestion but the most surprising thing is my image is in header (not body) and removing the margin padding of Body resolves it(when image is in header not body)
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61662
    
  67

It is invalid to put an image tag in the head; and when you have invalid HTML there's no telling what will happen.

Always validate your HTML and fix and invalid constructs.
 
Don't get me started about those stupid light bulbs.
 
subject: HTML page including image at top leaving blank space at top